aixos 根底与利用

Axios 是一个 基于 promise 的 HTTP 库 ，能够用在 浏览器 和node.js中

咱们先实现 axios 在 Vue 中发动一个申请再具体解说它

1. 在 vue 中应用 axios.get()
2. axios 概述与配置
3. axios 上的办法

在 Vue 中应用 axios.get()

// 装置 axios
npm i axios
// 在 store 的 actons 中发动申请
import axios from 'axios'

export const data = {
    namespaced: true,
    actions: {getData({ commit}, url) {axios.get(url)
                .then(res => {console.log(res.data);
                    commit('GETDATA', res.data)
                })
        }
    },
    mutations: {GETDATA(state, data) {state.student = data}
    },
    state: {student: ''}
}
// 在组件中 dispatch
<template>
  <div id="app">
    <button @click="getStudent"> 申请数据 </button>
    <span>{{student}}</span>
  </div>
</template>

<script>
import {mapActions} from "vuex";
import {mapState} from "vuex";
export default {
  name: "App",
  computed: {...mapState("data", ["student"]),
  },
  methods: {getStudent() {this.getData("http://localhost:8848");
    },
    ...mapActions("data", ["getData"]),
  },
};
</script>

axios.get(url)有点像 fetch()办法，返回一个Promise，而后进行后续的链式解决申请返回的内容

2 概述

个性

• 从浏览器中创立 XHR 对象
• 从 node.js 创立 http 申请
• 反对 Promise API
• 拦挡申请和响应、勾销申请
• 转换申请数据和响应数据
• 主动转换 JSON 数据
• 客户端反对进攻 XSRF

axios API
除了应用 axios.get()这样显式的调用其办法进行申请，也能够间接应用 axios({config}) 或者aixos(url,{config})

axios({
    method:'post',
    url:'http://localhost:8848',
    data:{user:'Alice'}
})
axios('http://localhost:8848')

如果没有申明 method，默认为 GET 办法

申请配置对象的属性

auth 将设置一个 Authorization 头笼罩 headers 中的该选项

• data：用作申请主体被发送的数据

  未设置 transformRequset 时，data 必须是 string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams 类型
  浏览器专属：FormData、File、Blob，Node 专属：Stream

申请配置对象的办法

• transformRequest：在发送申请前批改申请数据，限定 PUT、POST、PATCH

  // 前面数组中的函数必须返回一个 String、ArrayBuffer、Stream
  transformRequest: [function (data, headers) {                                
    // 对 data 进行任意转换解决
    return data;
  }],

• transformResponse：在 then/catch 前批改响应数据

  transformResponse: [function (data) {
    // 对 data 进行任意转换解决
    return data;
  }],

• paramsSerializer：params 参数序列化

  paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

• adapter：自定义解决申请，以使测试更轻松

  返回一个 promise 并利用一个无效的响应

  adapter: function (config) {/* ... */},

• onUploadProgress：为上传解决进度事件

  onUploadProgress: function (progressEvent) {// 应用原生的进度事件},

• onDownloadProgress：为下载解决进度事件

  onDownloadProgress: function (progressEvent) {// 对原生进度事件的解决},

• validateStatus：协商可承受的 HTTP 响应状态码，不在范畴内 reject

  validateStatus: function (status) {return status >= 200 && status < 300; // default},

• cancelToken：勾销申请的 cancel token

  cancelToken: new CancelToken(function (cancel) {})

响应构造

3 axios 上的办法

import axios from 'axios'
console.dir(axios);

1. 申请办法
2. 并发
3. 默认配置
4. 拦截器
5. 勾销

3.1 申请办法

axios 上的申请办法

• put 与 patch 的区别

  put 须要提供残缺的资源对象，在更新时短少的字段会被清空
  patch 发动的申请时部分更新，不须要提供残缺的字段，仅更新收到字段

创立实例
axios.create({config}) 能够自定义新建一个 axios 实例

const instance = axios.create({method: 'POST'})
console.dir(instance);

能够应用实例的申请办法进行再设置相干配置

3.2 并发

应用 axios.all([req1,req2])能够发送多个申请，axios.spead(callback(res1,res2))期待所有申请都实现返回后果

methods: {firstGet() {console.log("调用第一个接口");
    return axios.get("http://localhost:8848");
  },
  secondGet() {console.log("调用第二个接口");
    return axios.get("http://localhost:8000");
  },
  requst() {axios.all([this.firstGet(), this.secondGet()]).then(axios.spread((res1, res2) => {console.log("所有申请实现");
        console.log("申请 1 后果", res1);
        console.log("申请 2 后果", res2);
      })
    );
  },
},

axios 上的 all 办法相当于 Promise.all 办法的混入，在全副申请都实现后执行 axios.spread(callback)

3.3 默认配置

defaults 选项记录了申请的默认配置

import axios from 'axios'
console.log(axios.defaults);

能够对默认设置进行批改

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

优先级
config > defaults > 库默认值
axios 设置默认值后，创立的实例会继承这个默认值

3.4 拦截器

应用 interceptors 能够在申请或响应被 then/catch 解决前拦挡它们

import axios from 'axios'
console.log(axios.interceptors);

申请拦截器

// requset.use 增加申请拦截器
axios.interceptors.request.use(function (config) {
    // 在发送申请之前做些什么
    return config;
  }, function (error) {
    // 对申请谬误做些什么
    return Promise.reject(error);
  });

响应拦截器

// response.use 增加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应谬误做点什么
    return Promise.reject(error);
  });

移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
//request.eject 移除申请拦截器
axios.interceptors.request.eject(myInterceptor);

3.4 勾销

应用 cancel token 勾销申请
CancelToken.source 工厂办法创立 cancel token

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {cancelToken: source.token}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);
  } else {// 处理错误}
});

axios.post('/user/12345', {name: 'new name'}, {cancelToken: source.token})

// 勾销申请（message 参数是可选的）source.cancel('Operation canceled by the user.');

能够通过传递 executor 函数到 CancelToken 的构造函数来创立 cancel token

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {
    // executor 函数接管一个 cancel 函数作为参数
    cancel = c;
  })
});

// 勾销申请
cancel();

• isCancel(value)判断是否勾销了申请
• 一个 cancel token 能够勾销多个申请