axios的总结

---

axios?

axios是一个基于Promise 对ajax的一种封装，异步请求的工具，可以发送get、post请求

一、axios的特性？

• 支持Promise API
• 能够取消请求
• 可以在浏览器中发送XMLHttpRequests
• 能转换请求和响应数据
• 自动转换JSON数据
• 支持从 node.js 发出 http 请求
• 安全性更高，客户端支持防御 XSRF
• 能够拦截请求和响应

在浏览器环境用XMLHttpRequest对象发送请求，在node环境用http对象发送请求

二、axios的用法

默认用法

执行GET请求：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行POST请求）：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios API

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.delete(url[, config])
axios.put(url[, data[, config]])
axios.head(url[, config])
axios.patch(url[, data[, config]])
axios.request(config)
method是创建请求时使用的方法,默认是get

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

处理并发请求的助手函数

axios.all(iterable)执行并发多个请求
axios.spread(callback)

创建实例

可以使用自定义配置新建一个 axios 实例
axios.create([config])

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

实例的使用方法
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

Vue里封装axios

先通过npm下载aixos

npm install axios

然后在vue的utls文件里面创建http.js文件并导入并封装axios

import axios from 'axios'
const http = axios.create({
    timeout: 10000, //过期时间，ajax请求超过这个时间自动关闭
    headers: {
        'Content-Type': 'application/json'
    }
})

使用封装好的axios

this.http({
		url: "/xxx",
		params: {
			data:data
			data:data
				},
		})

拦截

需要对有请求头的拦截封装

http.interceptors.request.use(req => {
    //从session中获取token
    let token = sessionStorage.getItem('token');
    //如果有就在请求头中设置 req.headers['xxxx]=token xxxx这个token的名字是后台定的
    token && (req.headers['token'] = token);
    return req;
}, error => {
    Promise.reject(error)
});

---