Axios - 网络请求框架的使用

文章有参看其他博主文章：

• https://blog.csdn.net/weixin_43830606/article/details/88964522
• https://www.jianshu.com/p/636aa0e565a5

一、概述

1.为什么选择axios

• 随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解

2.axios特点

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

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

二、安装axios

1.NPM方式

https://www.jianshu.com/p/cdec60909094

2.Bower安装

$ bower install axios

3.Js引入方式

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

三、使用

• 支持的请求方法别名

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]])

1.GET请求

• 通过问号拼接方式

  // 向具有指定ID的用户发出请求
  axios.get('/user?ID=12345')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  

• 通过params对象传递参数，通过此方式，框架会自动帮你拼接参数到链接末尾

  axios.get('/user', {
      params: {
        ID: 12345
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  

2.POST请求

• 发送data数据，默认为Content-Type为application/x-www-form-urlencoded，此时发送数据是以formData形式提交的

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

• 发送json格式数据

  • 设置header头

  // 参数1：url，参数2：data,参数3：headers
  // data参数还得变成json格式
  var jsonData = {
      'birthday':'1996-1-1',
      'sex':'man'
  }
  axios.post("/userList",jsonData,headers:{'Content-Type':'application/json'})
       .then(res=>{
                console.log(res.data)
           })
       .catch(error=>{
                console.log(error)
       })
  

  • 添加qs库，将json序列化之后传递

  import axios from 'axios';
  import qs from 'qs';
  
  export default function request(url, params) {
      return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params))
          .then((response) => {
              console.log('response', response);
              return response;
          })
          .catch((error) => {
              console.log('error', error);
              return error;
          });
  }
  

3.执行多个并发请求

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

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

axios.all([getUserAccount(), getUserPermissions()])
  // 对两个请求的参数进行分割处理
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

4.通过config配置参数发送请求

上面通过axios的请求方法别名方式发送了请求，其实axios还支持传入一个config配置对象，可以传入更多参数，更加灵活

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

常见的配置选项如下：

其他不常使用参数：

四、使用拦截器

你可以截取请求或响应在被 then 或者 catch 处理之前

//添加请求拦截器
axios.interceptors.request.use（function（config）{
     //在发送请求之前做某事
     return config;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;

//添加响应拦截器
axios.interceptors.response.use（function（response）{
     //对响应数据做些事
      return response;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;

删除拦截器

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

将拦截器添加到axios的自定义实例

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

• 应用场景请参看此博客：https://www.jianshu.com/p/a0c67f4e145e

五、全局配置

1.全局配置

在js文件中引入了axios后，可以使用如下格式

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2.自定义实例默认值

//在创建实例时设置配置默认值
var instance = axios.create（{
   baseURL：'https://api.example.com'
}）;

//在实例创建后改变默认值
instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

六、创建实例

• axios除了可以通过全局使用外，还支持创建实例方式使用，即axios.create()
• 而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。
• 比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不同，支持的content-type不同，那么我可以单独为axios1和axios2写拦截器

1.创建一个实例

const instance1 = axios.create({
    baseURL:'http://localhost:8080', //请求的域名，基本地址
    timeout:5000,  //请求的超时时长，单位毫秒
    url:'/data.json',  //请求的路径
    method:'get，post，put，patch，delete' , //请求方法
    headers:{
        token:''  //比如token登录鉴权，请求的时候携带token，让后端识别登录人的信息
    },   //请求头
    params:{},  //请求参数拼接在URL上
    data:{},    //请求参数放在请求体里
})

如果设置了全局的配置，但是又想在创建的实例里修改配置怎么办

instance.default.timeout = 3000

2.具体的使用

假如我们有两个请求接口，那么我们一般的做法是创建两个axios实例

const instance1 = axios.create({
      baseurl:'http://localhost:8080',
      timeout:'1000'
})

const instance2 = axios.create({
      baseurl:'http://localhost:9090',
      timeout:'3000'
})

//instance1这里用到的参数有 baseurl,timeout,method,url
instance1.get('/userinfo').then(res=>{
  console.log(res)
})

//instance2这里用到的参数有 baseurl,timeout,method,url，params,并且对timeout进行了修改
instance1.get('/orderlist',{
    timeout:'5000'
    params:{}
}).then(res=>{
  console.log(res)
})

七、解决跨域问题

• 开发环境如果要跨域，解决跨域问题（设置代理）：vue-cli 3.0的在 package.json 同级目录新建一个 vue.config.js 文件，加入下面代码，其他版本找到配置文件的devServer加入代码

module.exports = {
    //axios域代理，解决axios跨域问题
    baseUrl: '/',
    devServer: {
        proxy: {
            '': {
                target: 'http://192.168.0.108:8090',
                changeOrigin: true,
                ws: true,
                pathRewrite: {

                }
            }
        }
    }
}