简单axios请求封装

▼前言：

Params和Data的区别:
GET请求的参数都是在URL上的服务器，http body里面的数据并不会被读取,这样我们传递的就是Params里的请求的参数了。

如果想让服务器读取http body里面的数据那就需要用POST请求了，POST请求的参数就存放在body。

总结使用方法如下：
get方法用params，post方法用data。

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
}

调用
在main.js文件中全局注入：

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

到这里我们就可以在vue页面中随意调用上面api中导出的几个网络请求方法了！