Axios

• axios : 是一款基于Promise设计模式封装的AJAX库（jquery中的AJAX就是最普通的AJAX库，没有基于Promise管理）
• axios是一款基于promise的HTTP库；用来前后端数据交互的；
• 网址 http://www.axios-js.com/

axios的使用

1. axios.get(url,config) : get请求方法,第二个参可以不传

axios.get: get请求，当请求成功以后，会执行then中的第一个回调函数；失败走catch;

//1.
				axios.get("./data.txt?a=111&b=222").then(function(res){
            // res : 请求成功的数据；这个res是被包装的数据；数据放到了res的data的属性名上
            console.log(res.data);
        }).catch(function(){

        })

//2.
				axios.get("./data.txt",{
          headers:{ //请求头
          	aaa:encodeURIComponent('哈哈哈') //想在请求头中加中文必须加encodeURIComponent
          },
          params:{ //参数，等价于jquery的data，不支持get缓存的处理
            a:111,b:222
          },
          validateStatus: function (status) {
            //定义对于给定的HTTP 响应状态码是 resolve 或 reject, 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
    				return status >= 200 && status < 300; // 
  				}
        }).then(function(res){
            // res : 请求成功的数据；这个res是被包装的数据；数据放到了res的data的属性名上
          	// headers : 存储响应头的信息
          	// request : AJAX实例
          	// status : 响应状态码
          	// status-text : 状态码描述
            console.log(res.data);
        }).catch(function(){

        })

2. axios.post(url,data,options) : DATA通过请求主体传递给服务器的内容

		axios.post("./data.txt",{a:1,b:2}).then(function(val){
            // {data:{}}
            // 最后把数据都会放到val的data属性上
        })

3. axios.all(iterable) : 并发请求

		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) {
            // 只有当两个请求都执行完成，才执行这个回调；
            // 两个请求现在都执行完成
        }));

常用的属性（第二个参）

1. baseURL 基础的URL路径
2. transformRequest 处理请求参数（对POST系列有作用）
3. transformResponse 把返回的结果进行处理
4. headers 设置请求头
5. params get系列请求传递给服务器的内容，不支持get缓存的处理
6. paramsSerializer 传递参数序列化
7. timeout 超时时间
8. withCredentials 表示跨域请求时是否需要使用凭证
9. responseType 预设服务器返回结果的格式，默认是JSON，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’
10. validateStatus 定义对于给定的HTTP 响应状态码是 resolve 或 reject, 如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve; 否则，promise 将被 rejecte

axios的默认参数配置

• 在使用axios之前,我们一般都需要配置默认的配置项

1. 基础URL,后期再发送请求的时候,URL请求地址最前面的公共部分就不需要再写了 (axios.defaults.baseURL = ‘https://api.example.com’)
2. 跨域请求中允许携带资源凭证 (例如COOKIE信息) (axios.defaults.withCredentials = true)
3. 设置请求头:POST系列中,我们传递给服务器数据的格式一般以x-www-form-urlencoded格式为主 (axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’)

拦截器

1. 在请求或响应被 then 或 catch 处理前拦截它们。

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2. 响应拦截器 : [成功状态]把从服务器获取的结果中的响应主体信息获取到即可,[失败状态]手动把错误信息抛出异常

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

axios

axios：一款基于 promise 设计模式封装的 AJAX 库（JQ 中的 AJAX 就是最普通的 AJAX 库，没有基于 promise 管理）
axios.post([URL], [DATA], [OPTIONS])：DATA 通过请求主传递给服务器的内容

1. options

options 的参数

1. baseURL：基础的URL路径

2. transformRequest：处理请求参数（对POST系列有作用）

3. transformResponse：把返回的结果进行处理

4. params：GET 系列请求传递给服务器的内容（会把 PARAMS 中的内容拼接为 X-WWW-FORM-URLENCODED 这种格式，基于 URL 问号传参传递给服务器）

5. paramsSerializer：传递参数的序列化

6. timeout：超时时间

7. withCredentials：跨域请求中是否允许携带凭证

8. responseType：预设服务器返回结果的格式，默认是 JSON，支持 BUFFER / TEXT / STREAM / DOCUMENT…

9. validateStatus：AXIOS 本身只有在 HTTP 状态码以2开头的时候才认为是成功，其余都认为是失败状态，当然我们可以自己来设置，基于 validateStatus 这个来修改

// 执行 axios.xxx() 都会返回一个 promise 实例，AJAX 请求成功会把实例的状态改为 FULFILLED，请求失败
// 状态改为 REJECTED；并且获取的结果或者错误原因作为 promise 的 value
axios.get('http://127.0.0.1:5500/json/data2.json', {
    headers: {
        AAA: encodeURIComponent('哈哈哈')
    },
    params: {
        lx: 1,
        from: 'WX'
    }
}).then(result => {
    // result：从服务器获取的结果
    return result.data;
}).catch(reason => {
    console.log(reason);
    throw new Error(reason);
}).then(data => {
    // data：从服务器获取的响应主体内容
	// CONFIG：我们自己配置的选项信息
	// DATA：存储的是响应主体内
	// HEADERS：存储响应头的信息
	// REQUEST：AJAX实例
	// STATUS：响应状态码
	// STATUS-TEXT：状态码的描述
    console.log(data);
});

2. 如何使用axios

在使用 AXIOS 之前，我们一般都需要配置默认的配置项

1. 基础 URL，后期再发送请求的时候，URL 请求地址最前面的公共部分就不需要再写了

axios.defaults.baseURL = "http://127.0.0.1:5500";

2. 跨域请求中允许携带资源凭证（例如 COOKIE 信息）

axios.defaults.withCredentials = true;

3. 设置请求头:POST 系列中，我们传递给服务器数据的格式一般以 x-www-form-urlencoded 格式为主

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

4. 设置请求拦截器（只对 POST 系列有用）：把基于请求主体传递给服务器的内容进行拦截，把内容格式变为 x-www-form-urlencoded 这种格式，再传递给服务器

axios.defaults.transformRequest = function (data) {
	if (!data) return data;
	let str = ``;
	for (let key in data) {
		if (!data.hasOwnProperty(key)) break;
		str += `&${key}=${data[key]}`;
	}
	return str.substring(1);
};

5. 设置响应拦截器：[成功状态]把从服务器获取的结果中的响应主体信息获取到即可，[失败状态]手动把错误信息抛出异常

axios.interceptors.response.use(function (response) {
    return response.data;
}, function (error) {
    throw new Error(error);
});

6. 配置什么才算成功（把 PROMISE 状态改为 FULFILLED）

axios.defaults.axios.defaults.validateStatus = function (status) {
    return /^(2|3)\d{2}$/.test(status);
}
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

// Promise.all
let promise1 = Promise.resolve(100);
let promise2 = Promise.resolve(200);
axios.all([promise1, promise2]).then(results => {
    let [val1, val2] = results;
    console.log(val1, val2);
});

/*
axios.all([promise1, promise2]).then(axios.spread(function (val1, val2) {
// axios.spread：把基于 axios.all 获取的结果一项项的单独获取到
console.log(val1, val2);
*/