Axios

花铛

已于 2023-04-24 15:22:09 修改

阅读量522

点赞数 2

分类专栏： AJAX 文章标签： AJAX

于 2019-03-13 11:26:54 首次发布

本文链接：https://blog.csdn.net/wsln_123456/article/details/86542420

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Axios：第三方 Ajax 库，是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装：

利用 npm 安装：npm install axios --save。
利用 cdn 引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

创建请求：

可以通过 axios(config) 或者 axios(url, config) 来创建请求。

请求的配置参数 config：

只有 url 是必须的，如果 method 未定义，默认为 get。

url：请求的服务器地址。
method：请求资源的方式。
baseURL：基础的服务器地址。如果 url 不是绝对地址，那么 baseURL 将会加到 url 的前面。
params：通过请求头携带的数据。
data：通过请求体携带的数据。
headers：请求头信息。
withCredentials：表示跨域请求时是否需要使用凭证。
timeout：超时时间。如果请求花费的时间超过了超时时间，那么请求会被终止。

//发送一个 GET 请求
axios('/user/1', {
   	 params: {
   	 	sex: 'man',
   	 },
}).then()

//发送一个 POST 请求
axios('/user', {
   	 method: 'POST',
     // 此时 Content-Type 是 application/json
   	 data: {
      	 username: 'Lee',
         age: 18,
   	 },
   	 // data 也可以是下面的形式，此时 Content-Type 是 application/www-form-urlencoded
   	 // data: 'username=Lee&age=18'
}).then()

//请求返回的内容
{
  data:{},
  status:200,
  statusText:'OK', 
  headers: {},  
  config: {},
  request: {},
}

可以通过 defaults 设置全局默认配置。对所有请求都有效。

配置具有优先级顺序：lib / defaults.js 中库的默认值 > defaults 属性 > 请求的 config 参数。

axios.defaults.baseURL = 'http://api.exmple.com'; 
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 
axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';

请求方式的别名：

axios.get()：发送 get 请求。第一个参数是 url，第二个参数是配置信息。

axios.get(
	'/user',
	{ params:{ id:1 } }, // 第二个参数用来传递配置信息
) 
	.then(function(response){ console.log(response); })

axios.post()：发送 post 请求。第一个参数是 url，第二个参数是通过请求体携带的参数。

axios.post(
	'/user',
	{username: 'Lee’， age: 18}, // 第二个参数用来传递要携带的数据，也可以使用 'username=Lee&age=18' 这种形式
) 
	.then(function(response){ console.log(response); })

axios.put()：发送 put 请求。
axios.delete();：发送 delete 请求。
axios.request()：发送 request 请求。
axios.head()：发送 head 请求。
axios.patch()：发送 patch 请求。

axios.all(iterable)、axios.spread(callback)：一次性并发多个请求。

function getUserAccount(){ 
	return axios.get('/user/1');
 } 
function getUserPermissions(){ 
	return axios.get('/user/1/permissions'); 
} 
axios.all([getUserAccount(), getUserPermissions()])
 	.then(
 		axios.spread((account, permissions) => { 
 			//当两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果 
 		})
	)

拦截器：

可以在请求之前或者返回的数据被 then、catch 处理之前进行拦截。

添加一个请求拦截器：

//在请求发出之前进行一些操作
axios.interceptors.request.use((config) => {
     return config; 
},function(err){ 
	 return Promise.reject(error);
 });

添加一个响应拦截器：

// 在数据返回到  then、catch 方法之前进行处理 
axios.interceptors.response.use(function(res){
   return res;
},function(err){ 
   return Promise.reject(error);
})

取消拦截器：

var myInterceptor = axios.interceptors.request.use((){);
axios.interceptors.request.eject(myInterceptor);

创建实例：

通过 axios.create() 创建一个 axios 实例，并且自定义其配置。

var instance = axios.create({
	 baseURL:"https://some-domain.com/api/",
	 timeout:1000,
     headers: {'X-Custom-Header':'foobar'}
});

instance.get();

Ajax 和 Axios：

Ajax:

本身是针对 MVC 的编程，不符合现在 MVVM 的浪潮；基于原生的 XHR 开发，XHR 本身的架构不清晰；单纯使用 Ajax 却要引入整个 Jquery。

Ajax 提交数据的时候，默认是以 FormData 的形式提交的，也就是 Content-Type:"application/x-www-form-urlencoded"

Axios:

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。具有以下特点：从浏览器中创建 XMLHttpRequest；从 node.js 创建 http 请求；支持 Promise API；拦截请求和响应；转换请求数据和响应数据；取消请求；自动转换JSON数据；客户端支持防御XSRF。

Axios 提交数据的时候，默认是以 Payload 形式提交数据，也就是 Content-Type:"application/json"。