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')
 })

 

最新鏈接：

1、如何在項目里管理好axios請求與vuex

2、 利用vue-cli + vant搭建一個移動端開發模板