安裝axios

cnpm i axios -S

項目根目錄分別新建.env.development文件和.env.production文件

//.env.development文件

#開發(fā)環(huán)境
NODE_ENV  = 'development'

# api地址
VUE_APP_BASE_API = 'http://localhost:3000'

//.env.production文件

#生產(chǎn)環(huán)境
NODE_ENV  = 'production'

# api地址
VUE_APP_BASE_API = 'http://線上接口地址'

src文件夾下新建utils文件夾寞奸，建立request.js文件

import axios from 'axios';

//根據(jù)環(huán)境 給指定的接口地址
const request = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 3000
})

//狀態(tài)碼返回
const codeMessage = {
    201: '新建或修改數(shù)據(jù)成功呛谜。',
    202: '一個請求已經(jīng)進入后臺排隊（異步任務(wù)）。',
    204: '刪除數(shù)據(jù)成功枪萄。',
    400: '發(fā)出的請求有錯誤隐岛，服務(wù)器沒有進行新建或修改數(shù)據(jù)的操作。',
    401: '用戶沒有權(quán)限（令牌瓷翻、用戶名聚凹、密碼錯誤）。',
    403: '用戶得到授權(quán)齐帚，但是訪問是被禁止的妒牙。',
    404: '發(fā)出的請求針對的是不存在的記錄，服務(wù)器沒有進行操作对妄。',
    406: '請求的格式不可得湘今。',
    410: '請求的資源被永久刪除，且不會再得到的剪菱。',
    422: '當(dāng)創(chuàng)建一個對象時摩瞎，發(fā)生一個驗證錯誤。',
    500: '服務(wù)器發(fā)生錯誤孝常，請檢查服務(wù)器旗们。',
    502: '網(wǎng)關(guān)錯誤。',
    503: '服務(wù)不可用构灸，服務(wù)器暫時過載或維護上渴。',
    504: '網(wǎng)關(guān)超時。',
};

//請求攔截
request.interceptors.request.use(
    config => {
        return config
    },
    error => {
        console.log('請求攔截錯誤', error) // for debug
        return Promise.reject(error)
    }
)

//響應(yīng)攔截
request.interceptors.response.use(
    response => {
        console.log('響應(yīng)返回值', response.data);
        return response.data
    },
    error => {
        const { response } = error
        return Promise.reject({ "status": response.status, "message": codeMessage[response.status] })
    }
)

export default request

封裝請求接口(src文件夾下新建api文件夾,新建user.js文件)

import request from '@/utils/request';

export const getUser = () =>{
  return request({
    url:'get_user_info',
    method:'get'
  })
}

使用

import { getUser} = '@/api/user'

getUser()
.then(res=>{
  console.log(res);
})
.catch(err=>{
  console.log(err);
})