vue封装Axios的get、post、put、del请求

Axios的get、post、put、del请求在vue项目中用的较多，每次都要写一遍很是不方便，尤其其中的config配置项是公用的，完全可以封装一下，这样下次再用就可以直接CV了！毕竟CV大法香啊！

封装网络请求

我们可以将相关的网络请求都放在一个js中，这样再使用和修改的时候就方便查找了。其中get请求比较简单，post 的请求根据传对象输类型不同，要做不同设置。

post请求常见的数据格式（content-type）

Content-Type: application/json 
： 请求体中的数据会以json字符串的形式发送到后端，这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，无需多余的配置。


Content-Type: application/x-www-form-urlencoded
：请求体中的数据会以普通表单形式（键值对）发送到后端


Content-Type: multipart/form-data
： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

1.封装get请求

/**
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get (url, params = {}, type = 'application/json') {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params,
      headers: {
        'Content-Type': type
      }
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

2.封装post请求

/**
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post (url, data = {}, type = 'application/json') {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      headers: {
        'Content-Type': type
      }
    }).then(response => {
      resolve(response.data)
    }, err => {
      console.log(err)
      reject(err)
    })
  })
}

3.封装put请求

/**
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put (url, data = {}, type = 'application/json') {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })
}

4.封装del请求

/**
 * @param url
 * @param data
 * @returns {Promise}
 */
export function del (url, params = {}, type = 'application/json') {
  return new Promise((resolve, reject) => {
    console.log(params)
    axios.delete(url, {
      params: params,
      headers: {
        'Content-Type': type
      }
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}