Axios.js 基本用法

了解更多请访问http://www.axios-js.com/zh-cn/

一、什么是axios.js

axios.js 是一个基于 promise 的 HTTP 库，支持浏览器和 Node 环境；
说明白点，就是使用这个库来执行 Ajax 请求，获取 JSON 数据；
我们可以利用 axios 可以发送 get、post 等一系列请求，然后得到数据；

二、特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

三、安装

安装方式，提供两种常用的，一种在 node 下运行，另一种在浏览器下运行；

1、使用 npm 在命令行运行如下命令，加载需要的包

npm install axios

实例

//引入axios
const axios = require('axios');
//使用get请求获取数据
axios.get('https://unpkg.com/axios/dist/axios.min.js')
.then(res => {
    console.log(res.data)
})
.catch(err => {
    console.log('错误' + err)
})

2、如果要在浏览器使用 axios，直接可以使用 cdn 地址加载即可

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //使用 get 请求获取远程数据，浏览器执行远程 Ajax 请求会有跨域问题
    axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(res => {
    console.log(res.data)
})
    .catch(err => {
    console.log('错误' + err)
})
</script>

四、请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

//常用的配置项
{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
      
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    id: 12345
  },
      
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    name: 'lisi'
  },
}

全局的 axios 默认值

全局属性配置，即将属性中大量重复的内容抽离出来单独设置；

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //全局默认值设置，baseUrl 会自动在 url 前面添加
    axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
    axios({
    url:'/posts',
    method:'get',
    params : {
        userId : 1,
        id : 1
    }
}).then(res => {
    console.log(res.data)
})
</script>

五、并发操作

1、如果项目中可能会产生多个异步请求，它们会根据耗时长短来执行；
2、我们如果想让所有的异步请求后，按照指定的顺序进行执行，可以使用处理并发请求的助手函数
axios.all(iterable)
axios.spread(callback)

实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//全局默认值设置，baseUrl 会自动在 url 前面添加
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.all([
    axios({
        url: 'users',
        data: '1.异步'
    }),
    axios({
        url: 'users',
        data: '2.异步'
    }),
    axios({
        url: 'users',
        data: '3.异步'
    })
]).then(value => {
    for (let i = 0; i < value.length; i++) {
        console.log(value[i].config.data)
    }
})
</script>

上面循环获取相应的值，比较麻烦，所以 axios 提供了另一个解决方案

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//全局默认值设置，baseUrl 会自动在 url 前面添加
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'; 
axios.all([
    axios({
        url: 'users',
        data: '1.异步'
    }),
    axios({
        url: 'users',
        data: '2.异步'
    }),
    axios({
        url: 'users',
        data: '3.异步'
    })
]).then(axios.spread((res1 , res2 , res3) => {
    console.log(res1.config.data)
    console.log(res2.config.data)
    console.log(res3.config.data)
}))
<script>

六、实例化

实例化，顾名思义就是 new 出一个对象来，这样这个对象具有独立性不被干扰；
可以使用自定义配置新建一个 axios 实例

实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//自定义实例化对象
const myAxios = axios.create();
myAxios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
myAxios({
    url : 'users'
}).then(res => console.log(res.data))
</script>

七、实例方法

以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
//request请求 通用
axios.request({
    method : 'get',
    url : 'users'
}).then(res => console.log(res.data))
</script>

八、拦截器

1、所谓拦截操作，就是在 Ajax 获取数据之前先拦截处理一些事务的操作；
2、这些操作包括：修改 axios 配置信息，loading，判断验证跳转等等；
3、拦截处理完毕之后，再通过 return 返回基础处理即可；

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//自定义实例化对象  
const myAxios = axios.create();
myAxios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

// 添加请求拦截器
myAxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('loading...');
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
myAxios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

myAxios({
    url : 'users'
}).then(res => console.log(res.data))
</script>