vue中使用axios,qs封裝js文件集中管理接口

1.首先是最重要的核心文件--封裝Promise -- 文件名:interfaceIndex.js

import axios from 'axios'
import qs from 'qs'

//請求接口
export function request(config) {
  var host = 'https://1313.app.cn/?s='
  var defer = new Promise(function(resolve, reject) {
    var requestConfig = {
      method: config.method,
      url: host + config.url,
      data: qs.stringify(config.data)
    }
    axios(requestConfig).then(res => {
      resolve(res.data)
    })
  })
  return defer
}

2.編寫詳細接口文件xxxx.js(注意要引入上一步的文件interfaceIndex.js) 

import * as httpServer from './interfaceIndex'

export default {
  //登錄
  loginApi(data) {
    return httpServer.request({
      method: 'POST',
      url: 'App.LoginByUsername', //按照用戶名密碼登陸
      data: data
    })
  },
  //按照上面的格式繼續添加接口
}

3.在xx.vue文件中使用 -- 以登錄爲例(注意要引入上一步的xxxx.js文件

//前後臺交互
let obj = {
  username: username,
  password: password,
  token: localStorage.getItem('token')
}
interfaceFile.loginApi(obj).then(res => {
  console.log(res)
}).catch(err => {//獲取數據失敗就報錯
  console.log(err)
})