Axios的使用总结

技术概括

答：Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。
axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。学习Axios的原因是vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios

技术详情

一、安装

//使用 npm:
$ npm install axios

二、实例

• 执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• 执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

三、axios API

• 可以通过向 axios 传递相关配置来创建请求
  axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

• 请求方法的别名
  axios.request(config)
  axios.get(url[, config])
  axios.delete(url[, config])
  axios.head(url[, config])
  axios.post(url[, data[, config]])
  axios.put(url[, data[, config]])
  axios.patch(url[, data[, config]])
• 并发(处理并发请求的助手函数)
  axios.all(iterable)
  axios.spread(callback)
• 创建实例
  axios#request(config)
  axios#get(url[, config])
  axios#delete(url[, config])
  axios#head(url[, config])
  axios#post(url[, data[, config]])
  axios#put(url[, data[, config]])
  axios#patch(url[, data[, config]])

问题 & 解决过程

• axios发送get post请求问题
  发送post请求时一般都要设置Content-Type，发送内容的类型，application/json指发送json对象但是要提前stringify一下。application/xxxx-form指发送？a=b&c=d格式，可以用qs的方法格式化一下，qs在安装axios后会自动安装，只需要组件里import一下即可。

    const postData=JSON.stringify(this.formCustomer);
    'Content-Type':'application/json'}
     
    const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
    'Content-Type':'application/xxxx-form'}

• axios拦截器的使用
  当我们访问某个地址页面时，有时会要求我们重新登录后再访问该页面，也就是身份认证失效了，如token丢失了，或者是token依然存在本地，但是却失效了，所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误，授权出错，也就是没有权利访问该页面。
  我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

    // http request 请求拦截器，有token值则配置上token值
    axios.interceptors.request.use(
        config => {
            if (token) {  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
                config.headers.Authorization = token;
            }
            return config;
        },
        err => {
            return Promise.reject(err);
        });
     
    // http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
    axios.interceptors.response.use(
        response => {
            return response;
        },
        error => {
            if (error.response) {
                switch (error.response.status) {
                    case 401:
                        // 这里写清除token的代码
                        router.replace({
                            path: 'login',
                            query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
                        })
                }
            }
            return Promise.reject(error.response.data) 
        });

总结

答：在项目开发过程中，不断遇到门坎，从而去学习新的知识来攻克它，学习的过程是艰辛的，但学习过后，自身能力的突破是令人激动的！

参考博客

• BeterJane：vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）
• 古兰精：Axios使用文档总结