fetch网络封装

import qs from 'qs'

// 根据环境变量进行接口区分

let baseURL = ''
let baseURLArr = [{
    
    
    type: 'development',
    url: 'http://101.200.90.125:9000'
},{
    
    
    type: 'test',
    url: 'www.test.com'
},{
    
    
    type: 'production',
    url: 'www.production.com'
}]

baseURLArr.forEach(item => {
    
    
    if(process.env.NODE_ENV === item.type) {
    
    
        baseURL = item.url
    }
})

export default function request(url,options = {
    
    }){
    
    
    // 自己写的url 拼接上公共的
    url = baseURL + url
    // get系列请求处理
    //如果没有设置请求方式，默认为get
    !options.method? options.method = 'GET' : null

    // 如果设置了请求方式，判断当前有没有问号，有问号就用&符号拼接
    // 没有问号，就用问号拼接传递参数
    // options.hasOwnProperty('params') 似乎被禁用
    if(Object.prototype.hasOwnProperty.call(options,'params')){
    
    
        if(/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)){
    
    
            const ask = url.includes('?') ? '&' : '?'
            url += `${
      
      ask}${
      
      qs.stringify(options.params)}`
        }
        // params 不是fetch 自带的有效参数，要从传递过来options删除，是让用户传进来
        // 用完过后移除
        delete options.params
}

// 合并配置项

options = Object.assign({
    
    
    // 是否允许跨域携带资源凭证same-origin同源可以 omit都拒绝
    Credentials: 'include',
    // 设置请求头
    headers: {
    
    }
},options)
options.headers.Accept = 'application/json'

// token校验
const token = localStorage.getItem('token')
token && (options.headers.Authorization = token)

// post 请求处理
if(/^(POST|PUT)$/i.test(options.method)) {
    
    
    !options.type? options.type = 'urlencoded' : null
    if(options.type === 'urlencoded') {
    
    
        options.headers['Content-Type'] = 'application/X-www-form-urlencoded'
        options.body = qs.stringify(options.body)
    } 
    if(options.type === 'json') {
    
    
        options.headers['Content-Type'] = 'application/json'
        options.body = JSON.stringify(options.body)
    }
}

//开始发送请求
return fetch(url,options).then(response => {
    
    
    // 返回的结可能是非200的状态码
    if(!/^(2|3)\d{2}$/.test(response.status)) {
    
    
        switch(response.status) {
    
    
            case 401:     //当前用户需要验证（一般是未登陆）
                break    //一般可以弹出遮盖层，或者回到登陆页面
            case 403:     // 服务器理解请求，但是拒绝执行，一般是token，session过期
                localStorage.removeItem('token') 
                break
            case 404:     // 找不到页面(请求失败，资源在服务器上未找到)，可以给一个友好的提示
                break     
       }
       return Promise.reject(response)
    }
    return response.json()
}).catch(error =>{
    
    
    // 客户端断网处理
    if(!window.navigator.onLine) {
    
    
        return
    }
    return Promise.reject(error)
})
}

使用

import fetch from './fetch'

function getFetchTestData(){
    
    
    return fetch('/paper/type/all')
}

export default {
    
    
    getFetchTestData
}

api

//定义数据请求的唯一入口,可以按大板块来分
import testData from './testData'
import fetchData from './testFetch'

export default {
    
    
    testData,
    fetchData
}

调用

<template>
  <div class="hello">
  </div>
</template>

<script>
import api from '../api/api'
export default {
    
    
  name: 'HelloWorld',
  props: {
    
    
    msg: String
  },
  methods: {
    
    
  },
  mounted () {
    
    
    // fetch方法
    // console.log(this.$api.fetchData.getFetchTestData());
    this.$api.fetchData.getFetchTestData().then(res => {
    
    
      console.log('fetch', res);
    })
    // // 原型链全局定义$api 方法  测试
    // this.$api.testData.getTestData().then(res => {
    
    
    //   console.log(res);
    // });
    // // 引入api 方式调用接口 测试
    // api.testData.getTestData().then(res => {
    
    
    //   console.log(res);
    // });
  }
}
</script>
<style scoped>
</style>