vue-cli环境fetch代码封装,实测直接可用

之前用axios，老是现option预请求一次，所以不用了，听说fetch比较好，所以找了些教程，自己封装一下

代码经过测试，可直接使用，如果浏览器不支持fetch便自动使用原生ajax

import {
   baseUrl
} from './config'

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
   type = type.toUpperCase();
   url = baseUrl + url;

   if(type == 'GET') {
       if(url.indexOf('?') >= 0) {
           url += '&' + getUrlString(data)
       } else {
           url += '?' + getUrlString(data)
       }
   }
   if(window.fetch && method == 'fetch') {
       let requestConfig = {
           //cookie既可以同域发送，也可以跨域发送
           credentials: 'include',
           method: type,
           headers: {
               'Content-Type': 'application/x-www-form-urlencoded',
           },
           mode: "cors",
           cache: "force-cache"
       }

       if(type == 'POST') {
           requestConfig.body = getUrlString(data)
       }
       try {
           let response = await fetch(url, requestConfig);
           return response.json();
       } catch(error) {
           throw new Error(error)
       }
   } else {
       return new Promise((resolve, reject) => {
           let requestObj;
           if(window.XMLHttpRequest) {
               requestObj = new XMLHttpRequest();
           } else {
               requestObj = new ActiveXObject;
           }

           let sendData = getUrlString(data);
           requestObj.open(type, url, true);
           requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
           requestObj.send(sendData);

           requestObj.onreadystatechange = () => {
               if(requestObj.readyState == 4) {
                   if(requestObj.status == 200) {
                       resolve(requestObj.response)
                   } else {
                       reject(requestObj)
                   }
               }
           }
       })
   }
}

function getUrlString(data) {
   let dataArr = []; //数据拼接字符串
   if(Object.keys(data).length) {
       Object.keys(data).forEach(key => {
           dataArr.push(key + '=' + data[key])
       })
   } else {
       return ''
   }
   return dataArr.join('&')
}

再贴一个php的请求头

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:*');
header('Access-Control-Allow-Credentials: true');

请求示例子

fetch(this.rooturl, {
                   name: 'wgzimg'
               },'GET').then((res) => {
                   console.log(res)
               })

好了，就这些，这要是方便自己以后直接使用，不用按照别的依赖

vue-cli环境fetch代码封装,实测直接可用

猜你喜欢