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)
      })
  })
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐