Axios必备知识

ajax是客户端与服务端通信的一种方式，由两部分组成，请求头-请求体，响应头-响应体,vue项目中流行使用axios库进行调用。

一般请求方法使用get/post/put/delete,近一年通过reasfulApi规则进行通信，也就是把URL当作唯一的标识，以前是query传参，类似一种功能，再通过请求方法知道请求的目的。

get传参的方式通过params传参，携带在url中传送给服务器。

post/put/delete传参方式，也可以跟get一样通过params传参，还可以通过data传参，data传参的三种类型：

'Content-Type'= 'multipart/form-data' 一般就是表单传参

new FormData()

处理后再发送给服务器

'Content-Type'= 'application/x-www-form-urlencoded' 就是需要系列化处理通过下载插件qs进行转换

import qs from 'Qs'
qs.stringify({
    data
})

处理后再发送给服务器

'Content-Type'= 'application/json' 非常常用的一种格式

JSON.stringify()

处理后再发送给服务器

使用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';

会全局设置拦截器

// 添加请求拦截器 
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);   
});

还可以设置跨域接口是否携带cookie

 // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

假如有多个服务器可以，处理不一样的拦截等处理的时候，可用axios.create({})进行创建，这样就互不干扰。