axios和fetch

时间：2022-05-26 07:10:31

前面的vuex提到了异步请求，在vue里异步请求怎么请求呢，很显然jq.ajax是不用了，不是不能用，而是没必要，jq是操作dom的工具，强行用浪费功能，还会加大打包后的体积，而且是没有promise的，所以有大佬封装了新的ajax，名字叫axios，也是vue的作者尤雨溪推荐使用的，这个axios是可以直接在nodejs端使用的

自行百度安装，axios是没有封装成可以让vue.use()的这种使用模式的，也没必要，但最好二次封装下

二次封装
先去创建一个util的工具文件夹，在里面再新建一个叫==request.js==文件，直接上代码

// 引入axios
import axios from 'axios'
import store from 'store'

const service = axios.create({
  // url = base url   request url
  // 这是请求的前缀的三元运算符，是需要配合proxy使用的
  // process.env.NODE_ENV 是nodejs的全局变量，需要懂点nodejs才知道
  // 意思是如果是开发【development】环境
  // 前缀就是当前本地地址 "localhost:端口"   "/proxy"   "url值"
  // 如果不是开发环境，意思就是线上环境，即打包后上线的环境，你让用户请求 "localhost:3000" 肯定是请求不到的
  // 所以打包出来的就是 "http://xxx.com"   "url值"
  baseURL: process.env.NODE_ENV === 'development' ? '/proxy' : 'http://xxx.com', //process.env.VUE_APP_BASE_API
  // 最长等待时间
  timeout: 5000 // request timeout
})

// 请求前的操作，config参数是请求前的一切数据，可以打印查看
service.interceptors.request.use(
  config => {
    // 在这里可以做权限的判断
    if(0){
        // 不同意请求 return 一个Promise.reject
        return Promise.reject("当前账号无该请求权限")
    }
    // 从vuex里取token值，如果这么写上面需要去引入vuex
    if (store.getters.token) {
      // 可以自动添加请求头token，就不需要自己手动一次次去写了
      // 什么是token，面试题篇里有
      config.headers['X-Token'] = getToken()
    }
    // 如果同意请求，需要return config
    return config
  },
  error => {
    // 错误处理
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 请求后的操作，response是axios二次封装的返回值
service.interceptors.response.use(
  response => {
    // 在返回值可以看到请求的地址
    const url = response.config.url;
    // 这是真正的返回数据
    const res = response.data;
    // 可以做一些统一的返回值处理
    if (res.code === 2000) {
      // 成功就返回res
      return res
    } else {
      return Promise.reject(new Error(res.msg || 'Error'))
    }
  },
  error => {
    // 无返回的错误处理
    return Promise.reject(error)
  }
)
// 这就是整个插件了
export default service

如何使用

写好接口
建议是统一一个文件夹叫req或者叫api，然后根据模块放置请求

axios和fetch

// 引入封装好的插件
import request from '@/utils/request'

export function getInfo(opt) {
  return request({
    // 这个在开发环境会变成 "http:localhost:端口"   "/proxy"   "/user/info"
    // 正式环境就是 "http:baidu.com"   "/user/info"
    url: '/user/info',  
    method: 'get',
    // get用params
    params: opt
  })
}

export function post(opt) {
  return request({
    url: '/post',  
    method: 'post',
    // post用data
    data: opt
  })
}

在vue文件里调用
在vuex使用查看上一篇，跟在vue文件里写法一样的

// 引入
import { getInfo,post} from 'api/user';

export default {
    data(){
        return { ... }
    },
    mounted(){
       getInfo({id:123123}).then(res=>{
          console.log(res)
       })
    },
｝

// 因为是promise请求还可以用
Promise.all([getInfo(),post()])
// 或者async
async mounted(){
     var res = await getInfo({id:123123})
},

上传文件

export function upload(formdata) {
  return request({
    url: '/uploadFile',
    method: 'post',
    data: formdata,
    headers: { 'Content-Type': 'multipart/form-data' },
  })
}

注意，axios的post请求是会自动转成了json字符串【跟文件上传无关】，如果后端说他不要json格式，一定要key-value的form表单格式，就不能用上面的封装了，得安装qs插件，还要修改headers

qs插件

import qs from 'qs';

export function upload(formdata) {
  return request({
    url: '/form',
    method: 'post',
    data: qs.stringify(data),
    headers: {'content-type': 'application/x-www-form-urlencoded'},
  })
}

就上面这么写，是发不出去请求的

我们上面出现过的这两句话

1. 这个在开发环境会变成 "http:localhost:端口"   "/proxy"   "/user/info"
2. 正式环境就是 "http:baidu.com"   "/user/info"

在jq-ajax请求的那一篇的最后面就写过，请求需要满足的条件

  1. 需要存在这个请求地址，第一个请求地址一看就没有，脚手架里怎么会有这个接口呢
  2. 需要浏览器不跨域

如何满足上面的两个条件，查看下一篇

补充fetch
fetch并不是一个插件，是跟xhr一样的，原生的，请求方式，目前兼容不好，普及不多，这里做个记录

fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    credentials: 'xxx' // 强制加入凭据头
    headers: new Headers({
      'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
      'Accept': 'application/json' // 通过头指定，获取的数据类型是JSON
    }),
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
})
.then((res)=>{
    return res.text()
})
.then((res)=>{
    console.log(res)
})

相关文章