axios的一些使用

axios的一些使用

1. axios的作用

    1.从浏览器中创建XMLHttpRequests
    2.从node.js中创建http请求
    3.支持PromiseAPI
    4.拦截请求和响应
    5.转换请求数据和响应数据
    6.取消请求
    7.自动转换JSON数据

2.axios的使用

封装axios

文件名 ajax.js
import axios from 'axios'
import qs from 'qs'

// 使用post请求，发送的是formdata格式的数据，设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 转换数据格式
axios.defaults.transformRequest = [function (data) {
  return qs.stringify(data)
}]
// 允许携带cookie
axios.default.withCredentials = true
// 封装请求
/*数据请求参数
* @param {object} options 请求参数选项
* url: 'xxx' 请求路径
* method: 'get/post' 请求方法
* data: {} post 请求参数
* params: {} get请求参数
* @param {boolean} isJson 是否是以json的形式请求数据
* */
export function ajax(options, isJson) {
  if (isJson) {
    options.headers = {'Content-Type': 'application/json'}
    options.transformRequest = [function (data) {
      return JSON.stringify(data)
    }]
  }
  return new Promise(((resolve, reject) => {
    options.method = options.method || 'GET'
    options.data = options.data || {}
    axios(options)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  }))
}

axios的请求与响应拦截 及 取消请求

// 取消上一次请求
let cancelToken = axios.CancelToken
let cancel

//  添加请求拦截器
const  myInterceptor = axios.interceptors.request.use(function (config) {
  //取消上一次请求
  if (typeof cancel === 'function') {
    cancel()
  }
  config.cancelToken = new cancelToken(function executor (c) {
    //一个执行器函数接收一个取消函数作为参数
    cancel = c
  })
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做些什么 ，可以统一处理请求返回的错误码，不用每次请求都去处理一次
  return response
}, function (error) {
  // 对响应错误做些什么 
  return Promise.reject(error)
})
// 取消拦截
axios.interceptors.request.eject(myInterceptor);

频繁点击，会发送多次请求，可以取消上一次请求，网速特好，请求很快的情况下，好像取消上次请求失效，可以使用flag标记，flag为true，禁止请求，请求返回之后，flag归为false

封装的axios的使用

在另起一个index文件index.js，发请求
import { ajax } from "./axios";  // 引入封装好的axios
// get请求
export const reqCp = params => ajax({
  url: 'xxxx',
  params
})
// post请求 参数为json格式
export const reqList = data => ajax({
  url: 'xxxxx',
  method: 'POST',
  data
},true) // 第二个参数 isJson为true
// post请求 参数为默认的fromdata格式
export const reqArticle = data => ajax({
  url: 'xxxxx',
  method: 'POST',
  data
})
下面是在vue中的使用
 import { reqCp, reqList, reqArticle } from './index' // 引入上面的请求
 调用：请求返回的是promise，所以支持promiseApi，也可以使用async awiat
 reqCp({key： value}).then(res => {
   console.log(res)
 })
 或者
 async click () {
  const cp = await reqCp({anchor_id: 'u123'})
  console.log(cp)
 }