看評(píng)論說(shuō)用markdown ，嗯。。被嫌棄了，我也覺(jué)得之前的排版好丑，重新寫一次，順便把put 和delete 方法加上

一. 在src 目錄下創(chuàng)建request 文件夾，然后在里面新建http.js和api.js文件，http.js 用于封裝 axios，api.js用來(lái)統(tǒng)一管理我們的接口。

安裝 axios

npm i axios --save

http.js

// 引入
import axios from "axios"
// 環(huán)境 
 axios.defaults.baseURL ='http://xxx.xxx.xxx:xxxx/';   //  要請(qǐng)求的后臺(tái)地址
// 請(qǐng)求超時(shí)
axios.defaults.timeout =30000;
//  post 請(qǐng)求頭 
axios.defaults.headers.post['Content-Type'] ='application/json';

封裝方法

/**
    * get方法，對(duì)應(yīng)get請(qǐng)求
    * @param {String} url [請(qǐng)求的url地址]
    * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
*/
 export function get(url, params){
        return new Promise((resolve, reject) =>{
        axios.get(url, {
            params: params
          }).then(res => {
                resolve(res.data)
            }).catch(err => {
                reject(err.data)
        })
    });
}

/**
* post方法，對(duì)應(yīng)post請(qǐng)求
* @param {String} url [請(qǐng)求的url地址]
* @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
*/
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params,).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    });
}

/**
 * put方法，對(duì)應(yīng)put請(qǐng)求
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 */
export function put(url, params) {
  return new Promise((resolve, reject) => {
    axios.put(url, params,)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

/**
 * $delete，對(duì)應(yīng)delete請(qǐng)求
 */
export function $delete(url, params){
  return new Promise((resolve, reject) =>{
    axios.delete(url, {
      data: params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

二，把接口統(tǒng)一寫在api.js 中

/**
 * api接口統(tǒng)一管理
 */
import { post, $delete, put } from "./http";

// 設(shè)備詳情
export const apiDeviceDetail = data => post("api/device/detail", data);
// 修改設(shè)備
export const apiUpdeteDevice = data => put("api/device", data);
// 刪除設(shè)備
export const apiDelDevice = data => $delete("api/device", data);

三，調(diào)用

init() {     // 方法
  apiDeviceDetail({
    sid: this.id             // 需要傳遞的參數(shù)
  }).then(res => {
      console.log(res)
    })
}