vuejs axios请求post和get的封装

在封装之前先了解一下要用到的东西。
Params和Data的区别 GET请求的参数都是在URL上的服务器并不会读取http body里面的数据,这样我们传递的就是Params里的请求的参数了。
如果想让服务器读取http body里面的数据那就需要用POST请求了，POST请求的参数就存放在body。
get方法用params，post方法用data。

// 封装axios primary
import axios from 'axios'
import { api } from './api'
import qs from 'qs'
// 默认的地址
axios.defaults.baseURL = api

Promise异步请求 resolve成功的回调函数 reject失败的回调函数

get 请求

let get = function (url, data) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: data
    }).then((res) => {
      //  请求成功返回后台数据
      resolve(res.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

post请求

let post = function (url, data) {
  return new Promise((resolve, reject) => {
    // qs.stringify()将对象 序列化成URL的形式
    axios.post(url, qs.stringify(data)).then((res) => {
    //  请求成功返回后台数据
      resolve(res.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

post get请求都可以发送的请求

let request = function (url, method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    axios({
      url: url,
      method: method,
      // post
      data: qs.stringify(data),
      // get
      params: data
    }).then((res) => {
      // 请求成功返回后台数据
      resolve(res.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

导出

export {
  request,
  get,
  post
}