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能够勾销多个申请