标签：status Vue 跨域 Fetch headers fetch response option

根据https://www.jianshu.com/p/489a627d4ba3？a=1&b=1，封装fetch方法。

//前置拼接url
let api = '/mock';//这里的api等于你在config.js定义的跨域设置

// //处理promise和fetch的兼容性以及引入
// require('es6-promise').polyfill();
// require('isomorphic-fetch');

//处理get请求，传入参数对象拼接
let formatUrl = obj => {
  let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?');
  return params.substring(0, params.length - 1);
};

let Fetch = (url, option = {}) => {
  option.headers = option.headers || {};

  option.headers['token'] = `${window.localStorage.getItem('token')}`;
  const m = (option.method || '').toLocaleLowerCase();
  // get query format
  if (m == 'get') {
    if (option.query) {
      url = url + formatUrl(option.query);
    }
  }
  //对非get类请求头和请求体做处理
  if (m === 'post' || m === 'put' || m === 'delete') {
    option.headers['Content-Type'] = option.headers['Content-Type'] || 'application/json';
    option.body = JSON.stringify(option.body);
    // option.body = qs.stringify(option.body) //根据后台要求，如果有时候是java请求会用qs转
  }
  return new Promise((resolve, reject) => {
    fetch(api + url, option)
      .then(response => {
        status = response.status;
        if (response.status >= 500) {
          Fetch.systemError && Fetch.systemError('系统错误');
        }
        return response;
      })
      .then(parseJSON)
      .then(response => {
        response.status = status;
        if (response.status >= 401) {
          if (response.state == 8888) {
            //登陆超时返回状态吗

            Fetch.overTime && Fetch.overTime(response);
          }
          if (response.state == 6666) {
            //没有权限返回状态码
          }
        }
        resolve(response);
      })
      .catch(error => {
        console.log('err', error);
        Fetch.otherError && Fetch.otherError(error.message);
      });
  });
};

//response 转化
function parseJSON(response) {
  return response.json();
}

export default Fetch;

config里的proxy的跨域设置：

proxy: {
            '/mock': {
                target: "http://127.0.0.1:8100",//接口地址
                changeOrigin: true,
                pathRewrite: {
                    '^/mock': ''
                }
            }
        }

main.js全局引入

//引入并自己封装的Fetch 方法
import Fetch from './helper/api/fetch';
Vue.prototype.Fetch = Fetch;

使用：

created() {
        this.Fetch('/menu/getPageList', {//http://127.0.0.1:8100/menu/getPageList
            method: 'GET'
        }).then(res =>{   //fetch方法返回的response
          this.pageList = res.cd; //Vue data里的值接收response里的值
          this.page = res.cd[0];  //Vue data里的值接收response里的值
        });
    }

标签：status,Vue,跨域,Fetch,headers,fetch,response,option
来源： https://blog.csdn.net/weixin_38010398/article/details/95219846

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。