axios

最新推荐文章于 2022-08-06 15:03:39 发布

孤影_ls

最新推荐文章于 2022-08-06 15:03:39 发布

阅读量390

点赞数 1

分类专栏：数据请求方法文章标签： axios 前端请求

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/106740854

版权

数据请求方法专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Axios

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

axios的使用

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(){

        })

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

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

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

常用的属性（第二个参）

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

axios的默认参数配置

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

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

拦截器

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

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);
  });

axios

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

1. options

options 的参数

baseURL：基础的URL路径
transformRequest：处理请求参数（对POST系列有作用）
transformResponse：把返回的结果进行处理
params：GET 系列请求传递给服务器的内容（会把 PARAMS 中的内容拼接为 X-WWW-FORM-URLENCODED 这种格式，基于 URL 问号传参传递给服务器）
paramsSerializer：传递参数的序列化
timeout：超时时间
withCredentials：跨域请求中是否允许携带凭证
responseType：预设服务器返回结果的格式，默认是 JSON，支持 BUFFER / TEXT / STREAM / DOCUMENT…
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 之前，我们一般都需要配置默认的配置项

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

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

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

axios.defaults.withCredentials = true;

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

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

设置请求拦截器（只对 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);
};

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

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

配置什么才算成功（把 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);
*/

孤影_ls

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
axios

Axiosaxios : 是一款基于Promise设计模式封装的AJAX库（jquery中的AJAX就是最普通的AJAX库，没有基于Promise管理）axios是一款基于promise的HTTP库；用来前后端数据交互的；网址 http://www.axios-js.com/axios的使用axios.get(url,config) : get请求方法,第二个参可以不传axios.get: get请求，当请求成功以后，会执行then中的第一个回调函数；失败走catch;//1.
复制链接

扫一扫