axios使用

一，前言

1.axios是基于promise的http库：axios中文文档

2.可以使用包管理工具安装：npm install axios

二，使用axios发送请求的三种方式

（1）配置config

import axios from "axios"
axios({
	url:'xxx', //请求url,必填
	method:'get | post | ...', //请求方法，默认get
	headers:{token:'xxxx'} //请求头部
	params: { //get请求传递参数
    	ID: 12345
  	},
  	data:JSON.stringify({ //post请求传递参数
		ID: 12345
	})
})

（2）使用别名

import axios from "axios"

//使用别名后config里不在需要声明method
axios.get(url,{
	headers:{token:'xxxx'} //请求头部
	params: { //get请求传递参数
    	ID: 12345
  	},
})
//使用别名后post传参在方法的第二个参数
axios.post(url, data ,{
	headers:{token:'xxxx'} //请求头部
})

(3）创建axios实例

import axios from "axios"

//创建axios实例，可以将指定的配置与实例的配置合并
let instance = axios.create({
	headers:{token:'xxxx'}, //请求头部
	timeout: 1000 * 30,
	baseURL: 'https://some-domain.com/api/', //自动添加到请求url前
})

instance.get(url,{
	params: { //get请求传递参数
    	ID: 12345
  	},
})
instance.post(url,data,{})

三，处理响应结果

1.axios是基于promise的http库，我们可以使用.then获取返回的信息

axios.get(url,{
	headers:{token:'xxxx'} //请求头部
	params: { //get请求传递参数
    	ID: 12345
  	},
}).then(data=>{
	...
})

2.返回的信息包含如下

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码，即在浏览器devtools请求标头的状态代码，有时候后端会在data里也返回一个代表状态的code,注意区分
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

3.错误信息获取

//在then的第二个参数
axios.get(url,{
	headers:{token:'xxxx'} //请求头部
	params: { //get请求传递参数
    	ID: 12345
  	},
}).then(data=>{
	...
},error=>{....})

//或者使用catch
axios.get(url,{
	headers:{token:'xxxx'} //请求头部
	params: { //get请求传递参数
    	ID: 12345
  	},
}).catch(error=>{
	 if (error.response) {
      //常见错误1：请求成功了，返回的状态码不是2xx, 例如500,404等
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      //常见错误2：请求发出但是没获取响应，例如请求超时时
      console.log(error.request);
    } else {
     //常见错误3：请求还未发出，就出现错误
      console.log('Error', error.message);
    }
})

四，拦截器

1.在axios中，我们可以使用拦截器，在请求发出或响应被 then 或 catch 处理前拦截它们。

2.请求拦截器：axios.interceptors.request

// 添加请求拦截器
axios.interceptors.request.use(
//请求发送成功
function (config) {
    // 在发送请求之前做些什么
    config.headers['x-token'] = 'xxxx'
    return config;
  },
//请求发送失败
function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

3.响应拦截器：axios.interceptors.response

// 添加响应拦截器
axios.interceptors.response.use(
//请求成功
function (response) {
	const {status , data } = response //response是返回的信息
    // 对响应数据做点什么
    return data ; //return的数据是后续.then获取的数据
  }, 
//请求失败
function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

五，使用 application/x-www-form-urlencoded

1.默认情况下，axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据，您可以使用以下方法。

import qs from "qs"
axios.post('/foo', qs.stringify({ 'bar': 123 }));

六，中止请求

1.有时候在请求发出时，我们希望能够中止请求，axios库支持中止发出的请求

2.方式1：

import axios from "axios";

const CancelToken = axios.CancelToken;
let source = CancelToken.source();

//需要中止的请求
axios({
	url:'xxx',
	cancelToken:source.token //给要取消的请求配置添加cancelToken
}).then(res=>...)
  .catch(err=>{
	  if(axios.isCancel(err)){
        //取消成功
      }
   })

//主动取消方式,调用source.cancel
source.cancel('cancel requset')

3.方式2：

import axios from "axios";

const CancelToken = axios.CancelToken;
let cancel //存放取消函数

//需要中止的请求
axios({
	url:'xxx',
	cancelToken:new CancelToken(function executor(c){
    	cancel = c
    }) //给要取消的请求配置添加cancelToken
}).then(res=>...)
  .catch(err=>{
	  if(axios.isCancel(err)){
        //取消成功
      }
   })

//主动取消方式,调用source.cancel
cancel && cancel('cancel requset')

4.方式3（推荐）：当axios版本大于v0.22.0，Axios 支持以 fetch API 方式—— AbortController 取消请求

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

5.取消成功时可以看到devtools状态栏上显示已取消（cancel）

七，注意事项

1.get请求的传参在config的params里，或者直接在url上?id=1111&name=xxxx

2.post请求传参在config的data里, 当使用别名时在实例方法的第二个参数

3.post请求传参传入一个对象时，默认是application请求，若想使用application / x-www-form-urlencoded，要将对象转化为id=1111&name=xxxx这种形式

4.对于delete请求，参数放在data里的，以body parameter传递，放在params里，以query parameter传递