Vue(九) axios

Axios:

Axios是一个基于promise的HTTP库；

引入

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

axios使用方法(API)

1.axios(config)
2.axios(url,[config])

config 配置对象

以下都是最常用的配置

axios({
 method: 'get', // post、get、put....
  baseURL: '', // 请求的域名，基本地址
  url: '', // 请求的路径
  params: {}, // 会将请求参数拼接在url上
  data: {}, // 会将请求参数放在请求体中
  headers: {}, // 设置请求头，例如设置token等
  timeout: 1000, // 设置请求超时时长，单位：ms

})

使用例子看github：

方法别名，（等同于axios（[config]）)

axios.request(config)
axios.get(url, [config])
axios.post(url, [data], [config]])
axios.delete(url, [config])
axios.head(url, [config])
axios.put(url, [data], [config])
axios.patch(url, [data], [config]])
axios.options(url, [config])

配置默认值

比如我们的方法里有用到相同的配置，每次都要写一次，这个时候就可以把它拿出来统一的写：
1.全局配置：

axios.defaults.baseURL = "https://...."
axios.defaults.timeout = 1000;

2.通过实例进行配置

axios.create();//通过这个方法来创建实例
//这个方法里边需要传递一个对象参数，这个参数也是我们要配置的一个对象
eg：
axios  create({
 baseURL:"https://....."
})    //这个方法会返回一个实例对象，这个实例对象会像axios一样被使用，我们用一个变量接收它
const  instance =  axios  create({
 baseURL:"https://....."
}) 
//但假如我们有a，b两个页面的话
const aInstance = axios.create({
baseURL:"https://....../a"
})
aInstance.get('/xxx');

const bInstance = axios.create({
baseURL:"https://....../b"
bInstance.get('/xxx');
})

配置的优先级：
全局<实例<请求（自己里边写的）

并发

比如一个大型的网站，肯定同时进行了不只一个请求，如果我们一个一个请求去写的话是不利于后期维护的。
并发就是同时进行多个请求，并统一处理返回值。

axios.all(iterable);
axios.spread(callback)

axios.all([
axios.get('/a');
axios.get('/b');
]).then(axios.spread((aRes,bRes)=>{
  console.log(aRes,bRes);
}))

axios拦截器

interceptors,在发起请求之前做一些处理，或者在响应回来之后做一些处理
拦截器分为：
1.请求拦截器

axios.interceptors.request.use( conifg =>{
return config;
})

2.响应拦截器

3.移除拦截器

  axios.interceptors.response.eject(添加接受拦截器的变量名字)

为axios实例添加拦截器

const instance = axios.create();
inatance.interceptors.resquest.use(config =>{})

本文地址：https://blog.csdn.net/xiaochumen0707/article/details/107889628