【Vue】Re22 Axios

Axios【AJAX IO System】

创建案例项目并且安装Axios

npm install axios --save

接口测试网址：

http://httpbin.org/

案例提供的数据地址：

http://123.207.32.32:8000/home/multidata

在Main.js中导入Axios

import axios from 'axios';

一、请求发送

基本语法：

1、请求地址

2、请求方式

3、请求参数

4、链式then调用响应

axios({
  url : 'http://123.207.32.32:8000/home/multidata', 
  method : 'post', /* get */
  params : {
    pageIndex : 1,
    type : 'pop',
    userId : '... ...'
  },
}).then(function (result) {
  console.log(result);
});

其他请求方式：

const config = {
  url : 'http://123.207.32.32:8000/home/multidata',
  method : 'post', /* get */
  params : {
    pageIndex : 1,
    type : 'pop',
    userId : '... ...'
  },
}

axios(config);
axios.request(config);

axios.get(config.url,config);
axios.delete(config.url, config);
axios.head(config.url, config);

axios.post(config.url, config.params, config);
axios.put(config.url, config.params, config);
axios.patch(config.url, config.params, config);

同时发送请求

axios.all([
  axios({
    url : 'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url : 'http://123.207.32.32:8000/home/data',
    params : {
      type : 'sell',
      page : 5
    }
  })
]).then(resultList => {
  console.log(resultList);
});

响应结果分开传递

axios.all([
  axios({
    url : 'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url : 'http://123.207.32.32:8000/home/data',
    params : {
      type : 'sell',
      page : 5
    }
  })
]).then(axios.spread((r1, r2) => {
  console.log(r1);
  console.log(r2);
}));

分开传递的写法就相当于解构函数的写法，直接声明了属性变量直接调用

二、配置详细

全局配置：

也可以在局部请求时更改配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'; // 根URL
axios.defaults.timeout = 5000; /*  毫秒   */ //超时时间上限
axios.defaults.transformRequest = function (data) {  // 请求前数据处理

};
axios.defaults.transformResponse = function (data) {  // 请求后数据处理

};
axios.defaults.headers = { // 请求头
  'x-Requested-With' : 'XMLHttpRequest'
};
axios.defaults.params = { // 请求参数
  id : 12
};
axios.defaults.paramsSerializer = function (params) { // 查询对象序列化
  // todo ... ...
}
axios.defaults.data = { /* 响应请求体 */
  
}
axios.defaults.withCredentials = false; // 跨域是否携带Token
axios.defaults.adapter = function (resolve, reject, config) { // 自定义请求处理
  // todo ... ...
}
axios.defaults.auth = { // 身份信息
  username : '',
  password : ''
}
axios.defaults.responseType = 'json'; // 响应格式