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