Vue前端api封装（修改版）

看评论说用markdown ，嗯。。被嫌弃了，我也觉得之前的排版好丑，重新写一次，顺便把put 和delete 方法加上

一. 在src 目录下创建request 文件夹，然后在里面新建http.js和api.js文件，http.js 用于封装 axios，api.js用来统一管理我们的接口。

安装 axios

npm i axios --save

http.js

// 引入
import axios from "axios"
// 环境 
 axios.defaults.baseURL ='http://xxx.xxx.xxx:xxxx/';   //  要请求的后台地址
// 请求超时
axios.defaults.timeout =30000;
//  post 请求头 
axios.defaults.headers.post['Content-Type'] ='application/json';

封装方法

/**
    * get方法，对应get请求
    * @param {String} url [请求的url地址]
    * @param {Object} params [请求时携带的参数]
*/
 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方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
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方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
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，对应delete请求
 */
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)
      })
  });
}

二，把接口统一写在api.js 中

/**
 * api接口统一管理
 */
import { post, $delete, put } from "./http";

// 设备详情
export const apiDeviceDetail = data => post("api/device/detail", data);
// 修改设备
export const apiUpdeteDevice = data => put("api/device", data);
// 删除设备
export const apiDelDevice = data => $delete("api/device", data);

三，调用

init() {     // 方法
  apiDeviceDetail({
    sid: this.id             // 需要传递的参数
  }).then(res => {
      console.log(res)
    })
}