欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中http,axios请求

程序员文章站 2022-07-02 12:23:08
...

vue是一个纯前端的框架,需要webapi支持数据。通过http请求webapi就行了。我们既可以用jquery ajax请求,也可以使用axios请求,我们项目中选择了后者。axios里有个拦截器挺好的,它可以在请求发送前,添加请求头及一些工作。

const requestInterceptor=axios.interceptors.request.use(
  config => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/json',
      'Authorization':'Bearer '+getStore('token'),
       xhrFields: {
         withCredentials: true
      },
      'Pragma': 'no-cache',
      'Cache-Control': 'no-cache'
  }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

这个拦截器做了两件事情:

a、请求data:把js对象转为json字符串

b、请求头:添加了数据发送格式,token验证、IE下get有缓存,所以加了‘Cache-Control’和‘Pragma’

拦截器在请求的时候,也可以根据情况去掉:

/**
 * post请求
 * @param url
 * @param data
 * @param  isRemoveInterceptor  是否移除拦截器
 * @returns {Promise}
 */

 export function post(url,data = {},isRemoveInterceptor=false){
   if(isRemoveInterceptor){
     axios.interceptors.request.eject(requestInterceptor);
   }
   return new Promise((resolve,reject) => {
     axios.post(axios.defaults.baseURL+url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }