zoukankan html css js c++ java

axios封装异步获取数据的函数以及全局拦截

在项目后期调试接口的过程中，我们可能经常在生产环境和开发环境中进行切换。如果我们没有封装异步调用数据函数的话，我们在切换开发环境时就要同时更改多个接口地址，那是非常麻烦的。那么我们如何在vue项目中封装自己的异步函数呢？

一：配置公共参数：

我们可以在项目中的某个文件夹下新建一个config.js ，这个文件是专门用来存放公共参数的。所以我们就可以将公共的接口地址或者一个参数写在里面：

export const apiUrl = 'http://jxhd.turingtec.cn/cj_app_api/app/'
export const ERR_OK = '1'
// export const commonParams = {
//   g_tk: 1928093487,
//   inCharset: 'utf-8',
//   outCharset: 'utf-8',
//   notice: 0,
//   format: 'jsonp'
// }

二：封装异步调用函数：

在vue项目中，我们不建议使用jquery，所以我们在异步获取数据时就不能使用$.get()或者$.post()等方法了。而vue官方已经不推荐使用vue-resource，而是使用axios。

import axios from 'axios'
import {apiUrl} from './config'

export function myGet(url, params) {
  let _url = apiUrl + url
  return new Promise((resolve, reject) => {
    axios.get(_url, {params}).then(function (response) {
      resolve(response.data)
    })
    .catch(function (err) {
      reject(err)
    })
  })
}

export function myPost(url, params) {
  let _url = apiUrl + url
  return new Promise((resolve, reject) => {
    axios.post(_url, {params}).then(function (response) {
      resolve(response.data)
    })
    .catch(function (err) {
      reject(err)
    })
  })
}

三：组件调用封装好的函数:

在第二步中，我们使用了es6的promise，所以说myGet()和myPost()返回的都是promise对象。而我们在调用函数后返回的promise对象必须得使用这个对象的then方法，才可以获取到promise中的值：

const url = 'school/getNewsInfo'
　　　
      // const params = Object.assign({}, commonParams, {
      //   'stuId': 1,
      //   'begin': '1'
      // })
      const params = {
        'stuId': 1,
        'begin': '1'
      }
      // 直接返回的promise对象是无法获取其中的值的
      console.log(myGet(url, params))
      // 这个调用promise对象的then方法就可以获取其中的值
      myGet(url, params).then((res) => {
        if (res.code === ERR_OK) {
          console.log(res.data)
        }
      }, (err) => {
        console.log(err)
      })

      const url2 = 'school/getNewsInfoDetail'
      const params2 = {
        'id': 1
      }
      myPost(url2, params2).then((res) => {
        if (res.code === ERR_OK) {
          console.log('success')
        }
      }, (err) => {
        console.log(err)
      })

使用axios.http的方式自定义post或者get等：

get:

axios({
	url : 'http://jxhd.turingtec.cn/cj_app_api/app/',
	method: 'get',
	params: {
		'userId':  101
	}
}).then(res=>{
	
})

post

axios({
	url : 'http://jxhd.turingtec.cn/cj_app_api/app/',
	method: 'post',
	data: {
		'userId':  102
	}
}).then(res=>{
	
})

注意：在传参时，get方法是放在params对象中，post方法是放在data对象中。

axios全局拦截：当用户进行异步调用时，需要先走拦截内的代码：

1：异步请求前：

axios.interceptors.request.use(function(config){ // 拦截请求前的状态
 	console.log('request init')
　　　　 //这里我们可以也添加loading效果

        return //return之后会使接下来的代码都不执行
 })

2：异步请求后：

  axios.interceptors.response.use(function(response){ // 拦截请求后的状态
 	console.log('response')
 })

axios封装异步获取数据的函数以及全局拦截

最新链接：