axios 配置公共接口api

1、首先配置接口地址

   配置开发环境接口地址:找到 config/dev.env.js 

   module.exports = merge(prodEnv, {
     NODE_ENV: '"development"',
     API_ROOT: '"http://www.baidu.com"' ,//测试环境接口地址
  })

   配置生产环境接口地址:找到 config/prod.env.js 

   module.exports = {
     NODE_ENV: '"production"',
     API_ROOT: '"http://www.baidu.com"' //正式环境接口地址
   }

   2、在assets/js/api.js

   import axios from 'axios'
import { Toast } from 'vant';
let baseUrl = process.env.API_ROOT //接口地址
export default{
  get(url,parame={}){//get请求
    return new Promise((resolve,reject)=>{
      var toke = sessionStorage.getItem('localToken')
      axios.defaults.baseURL = baseUrl
      axios.defaults.headers.common['Authorization'] = toke||''
      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
      //var timestamp=new Date().getTime() //获取时间戳
      axios.get(url,parame)
      .then((res)=>{
        var response = res.data
        resolve(response)
      })
      .catch((err)=>{
        let res = err.response
        if (err) {
          Toast('api error, HTTP CODE: ' + res.status)
        }
      })
    })
  },
  post(url,parame={}){//post请求
    return new Promise((resolve,reject)=>{
      var toke = sessionStorage.getItem('localToken')
      axios.defaults.baseURL = baseUrl
      axios.defaults.headers.common['Authorization'] = toke||''
      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
      //var timestamp=new Date().getTime() //获取时间戳
      axios.post(url+'?token='+token,parame)
      .then((res)=>{
        var response = res.data
        resolve(response)
      })
      .catch((err)=>{
        let res = err.response
        if (err) {
          Toast('api error, HTTP CODE: ' + res.status)
        }
      })
    })
  }
}

3、在main.js 引入api.js

import api from './assets/js/api.js'

Vue.prototype.$api = api

4、调用

test(){
        var self = this
          self.$api.post('/xxx/xxx/xxx',{
            accountOrPhone:'admin',
            password:123456
          })
          .then((res)=>{
            //reject()
            if(res.code=='00'){
              self.userInfo='000'
            }else{
              Toast(res.message)
            }
          })
      },

你可能感兴趣的:(vue,axios,接口配置)