How to implement axios secondary encapsulation in vue

This article mainly introduces the sample code of vue axios secondary encapsulation. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor and take a look.

During this period, I told the project needs and used vue.

When I first started building the framework, I used vue-resource. Later, I saw the official recommendation of axios, so I changed it to axios and encapsulated it

//引入axios
import axios from 'axios'

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
 //发起请求时，取消掉当前正在进行的相同请求
 if (promiseArr[config.url]) {
  promiseArr[config.url]('操作取消')
  promiseArr[config.url] = cancel
 } else {
  promiseArr[config.url] = cancel
 }
  return config
}, error => {
 return Promise.reject(error)
})

//响应拦截器
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

export default {
 //get请求
 get (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'get',
   url,
   params: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
 },
 //post请求
 post (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'post',
   url,
   data: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
  }
 }

Instructions

1. In order to prevent the same request currently being made when a request is initiated, a hash judgment is added to the request interceptor to intercept the same request URL

2. Extract the get and post public configurations in axios Come out

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

3. Encapsulation of get and post requests. You may ask, the axios here returns the promise object, why do you need to encapsulate the promise again for get and post? Because as far as I am concerned, I am developing When using async await, the data request will fail. The error reported is that the returned object is not a promise object. (ps: Async await returns a promise. We will discuss this issue later.) Just return a promise object directly to avoid the above error. The following is an example of the request interface

import req from '../api/requestType'
/**
 * 拼团详情
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

The following is the acquisition of data

async getData() {
 const params = {
  TopCataID: 0,
  pageNumber: this.pageNumber,
  pageSize: this.pageSize
 }
 const res = await groupList(params)
},

Here we have simply encapsulated axios suitable for our own project

Reason for encapsulation:

1. You can discuss the error codes with the back-end and process them in a unified prompt here to save unnecessary trouble.

2. If you need to encrypt and decrypt the entire interface message, you can process it here

Unified classification of interfaces:

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 
 
export default ApiSetting

Benefits of classification:

1. Later interface upgrades or interface name changes facilitate maintenance

http call:

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 
 
 } 
} 
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed interpretation of the new features of Angular5.1

##How to develop Sudoku games using vue

How to use vuex to implement menu management

Detailed interpretation of webpack3 compilation compatible with IE8 (detailed tutorial)

How to implement it using JS Remove duplicate json

The above is the detailed content of How to implement axios secondary encapsulation in vue. For more information, please follow other related articles on the PHP Chinese website!