异步组件。

参考：

基础

安装

  1. npm install axios
  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基础api

  1. axios.get(url[, config])
  3. axios.delete(url[, config])
  5. axios.post(url[, data[, config]])
  7. axios.put(url[, data[, config]])
  9. axios.patch(url[, data[, config]])

get请求

  1. axios.get('/user', {
  2.     params: {
  3.       ID: 12345
  4.     }
  5.   })
  6.   .then(function (response) {
  7.     console.log(response);
  8.   })
  9.   .catch(function (error) {
  10.     console.log(error);
  11.   });

post请求

  1. axios.post('/user', {
  2.     firstName: 'Fred',
  3.     lastName: 'Flintstone'
  4.   })
  5.   .then(function (response) {
  6.     console.log(response);
  7.   })
  8.   .catch(function (error) {
  9.     console.log(error);
  10.   });

完整参数

  1. axios({
  2.   method: 'post',
  3.   url: '/user/12345',
  4.   data: {
  5.     firstName: 'Fred',
  6.     lastName: 'Flintstone'
  7.   }
  8. });

拦截器

  1. // 添加请求拦截器
  2.     axios.interceptors.request.use(function (config) {
  3.         /*
  4.         添加token
  5.          */
  6.         let token = localStorage.getItem("x-auth-token");  // 给所有请求带上token
  7.         if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
  8.             config.headers.token = `${token}`;
  9.         }
  11.         return config;
  12.     }, function (error) {
  13.         // 对请求错误做些什么
  14.         return Promise.reject(error);
  15.     });
  17.     // 添加响应拦截器
  18.     axios.interceptors.response.use(function (response) {
  19.         // 对响应数据做点什么
  20.         return response.data;
  21.     }, function (error) {
  22.         // 对响应错误做点什么
  23.         return Promise.reject(error);
  24.     });

form形式传递数据

参考：csdn

post默认是json形式，后台必须使用requestbody接收，如果要使用传统form形式，改怎么办呢?
qs其实是querystring的缩写，会url格式化。

引用

  1. <script src="//cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  3. 注意，这种方式引用要使用：Qs.stringify

使用

  1. axios.post('/foo', qs.stringify({ 'bar': 123 }));

和JSON的区别：

axios - 图1

全局默认配置

这个使用不多

  1. axios.defaults.baseURL = "https://api.example.com";
  2. axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
  3. axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  4. axios.defaults.headers.common['Authorization'] = ''; // 设置请求头为 Authorization
  5. axios.defaults.timeout = 200;
  7. // 跨域处理cookie等权限
  8. axios.defaults.withCredentials = true

异步执行顺序解决方案

有些时候，我们异步有执行顺序的要求。

使用return

image.png

使用await

函数内同步，函数外异步。

示例一

  1. // async/await version:
  2. async function asyn_run(){
  3.   let v1 = await promise1();
  4.   let v2 = await promise2(v1);
  5.   let v3 = await promise3(v1, v2);
  6.   /*... v1, v2, v3 ... */
  7. }
  8. async_run();  //actually non-blocking

示例二：

  1.     let user = {
  2.         id: 1
  3.     };
  4.     async function init() {
  5.         let a = await axios.post("http://httpbin.org/post", user).then(res => {
  6.             user.id = 2;
  7.             return 123;
  8.         });
  9.         console.log(a); // 这个时候a=123
  10.         let b = await axios.post("http://httpbin.org/post", user).then(res=>{
  11.             console.log(res.data);
  12.         })
  13.     }
  14.     init();

项目使用