一篇文章熟练掌握 Axios

Axios是什么

Axios是一个基于Promise的网络请求库，作用于node.js和浏览器中。在服务端使用原生node.js http模块，在客户端使用XMLHttpRequest。是基于Promise对Ajax的封装。

Axios的特性

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

安装

npm i axios
yarn add axios

Axios基本使用

使用前记得导入axios
发送GET请求：

axios.get('/user?id=1234')
   .then(res => {
       console.log(res)
   })
   .catch(error => {
       console.log(error)
   })
   .then(() => {
       //总会执行
   })

注意传递参数的方式，路径后加’?'后拼接参数。还可以用另一种方式传递参数：

axios.get('/user',{
    params: {
        id: 1234
    }
}).then(res => {
       console.log(res)
   })
   .catch(error => {
       console.log(error)
   })
   .then(() => {
       //总会执行
   })

不在地址后面进行拼接，axios.get()这个方法第一个参数是要请求的路径，第二个参数是一个对象，可以在这个对象中加一些配置，参数就写在这里的params里面。也可以使用async/await：

async function getUser(){
    try{
        const res = await axios.get('/user?id=1234')
        console.log(res)
    }catch (error){
        console.error(error)
    }
}

注意要用一个函数包裹起来并在前面加上async，注意要使用try-catch捕获错误，注意await的位置。

POST请求/多请求

发送一个POST请求：

axios.post('/user',{
    firstname: 'qiling',
    lastname: 'wuxie'
}).then(res => {
    console.log(res)
}).catch(error => {
    console.log(error)
})

axios.post() 方法的第一个参数是请求的地址，第二个参数是一个对象，是要post的数据。
如果发起多个请求可以使用Promise.all。这个方法可以处理多个Promise:

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

注意Promise.all()接收的参数是一个Promise对象数组，后面.then接收到的结果也是一个数组，是一个由上面的Promise对象数组返回的结果构成的数组。

Axios实例

使用自定义配置新建一个实例:

const instance = axios.create({
    baseURL: 'http://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
})

axios.get()等方法都是实例方法。

请求配置

以下是创建请求时可以使用的配置。只有url是必须的。不指定method，请求就默认是GET

• url 请求的服务器的url
• method 创建请求时使用的方法
• baseURL 自动加在url前面
• transformRequest: [function(data, header) { return data }]发请求前修改请求数据，只能用于post，put，patch
• transformResponse: [function (data) { return data }] 传递给 .then/catch之前修改相应数据
• headers: {‘X-Requested-With’: ‘XMLHttpRequest’} 自定义请求头
• params: { id: 12345 } 设置与请求一起发送的URL参数，必须是简单对象
• data: { firstname: ‘qiling’ } 作为请求体被发送的数据
• timeout 指定请求超时的毫秒数
• proxy 定义代理服务器的主机名，端口，协议
• validatestatus: function (status) { return status >= 200 && status < 300; // 默认值 } 如果返回true就resolved,否则就是rejected
• cancelToken: new CancelToken(function (cancel) { }) 使用cancel token取消请求，cancel token由CancelToken.source()创建

响应结构

一个请求的响应包含以下信息：

{
    //服务器提供的响应
    data: {},
    //来自服务器响应的HTTP状态码
    status: 200,
    //来自服务器响应的状态信息
    statusText: 'OK',
    //服务器响应头
    headers: {},
    //axios请求的配置信息
    config: {},
    //生成此响应的请求，在浏览器中是XMLHttpRequest实例
    request: {}
}

使用.then 时将获得以下相应：

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

数据，状态码，状态信息，响应头，请求的配置信息，生成此响应的请求。如果使用catch，相应可通过error对象被使用。

拦截器

在请求或响应在被then和catch处理之前拦截它们
添加请求拦截器：

axios.interceptors.request.use(function (config) {
    //在发送请求之前做什么
    return config
},function (error){
    //对请求错误做些什么
    return Promise.reject(error)
})

添加响应拦截器：

axios.interceptors.request.use(function (response){
    //2xx范围内的状态玛都会触发这个函数
    //对相应数据做些什么
    return response
}, function (error) {
    //超出2xx范围的状态码都会触发这个函数
    //对相应错误做些什么
    return return Promise.reject(error)
})

移除拦截器：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

自己定义的axios实例也可以添加拦截器：

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

错误处理

axios.get('/user/12345')
   .catch(function (error) {
       if(error.response) {
           //请求成功且得到响应，但是状态码不是2xx
           ....
       } else if(error.request){
           //请求成功，没得到响应
           //`error.request` 在浏览器中是 XMLHttpRequest 的实例
           ....
       }else {
           //请求的发送出问题了
           console.log(error.message)
       }
   })

默认是超出2xx范围就错误，但是使用使用 validateStatus 配置选项，可以自定义抛出错误的 HTTP code。

axios.get('/api',{
    //注意要把status作为参数传进去
    validateStatus: function (status) {
        return status < 500
    }
})

可以对error对象进行toJSON获取更多错误信息：

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });