Axios与fetch

Axios

功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 axios({
    methods: '请求的类型',
    url: '请求的URL地址',
    params: {'URL中的查询参数(get)'}，
    data: {'请求体参数(post)'}
  }).then((result) => {
    //.then用来指定请求成功之后的回调函数
    //形参中的result是请求成功之后的结果
  })

axios函数的返回值是一个Promise对象，通过请求返回的数据是经过axios处理过的

axios在数据外套了一层壳，返回的结果.data才是真正请求回来的数据

async与awit

  ;(async()=>{
   const {data: res} = await axios({
    method:'post',
    url:'请求地址',
    data:{
     '请求数据'
    }
  })
  console.log(res);
  })()

调用axios后，使用async/await进行简化

再使用解构赋值将axios封装的大对象中，把data属性结构出来在进行重命名

axios的get与post

get

axios.get('url地址', {
      // get参数
      params: {},
      // 设置请求头
      headers: {}
    })
    .then(function(response){},function(err){}) 
    
//get请求的数据也可以写在请求地址中

axios.get(url地址?key=value&key2=value2)
	.then(function(response){},function(err){}) 

post

axios.post('url地址', {/*post参数*/})
	.then(function(response){},function(err){})

axios的拦截器

通过对请求和响应进行拦截 对数据进行二次处理

import axios from 'axios'

const api = axios.create({
  baseURL:'https://cnodejs.org/api/v1'
})

// 请求拦截
api.interceptors.request.use(	// 接受两个回调函数作为参数
  config => {				 	// 第一个函数用于对请求配置进行修改
	
	// 配置业务逻辑 当用户有token时 发送请求在请求头自动携带token
	const token = window.sessionStorage.token 
    if(token) config.headers.authorzation = token
    
    return config
  },
  err => {					// 错误处理
    return Promise.reject(err)
  }
)

// 响应拦截
api.interceptors.response.use(response => {
	// 业务逻辑 当响应状态码为401时 跳转到登录页
 	if(response.status === 401) return window.location.href = '/login'
})


export default api

Vue 2.x将axios挂载为全局属性

因为vue组件中只要请求数据就需要使用axios，import引入代码重复

通过把axios挂载在Vue构造函数的原型上实现引入代码简化

//在main.js中
import axios from 'axios'

//Vue.prototype.axios = axios
Vue.prototype.$http = axios //便于进行区分及维护

挂载后在所有组件中都可以通过this.axios使用axios

一般Vue的内置属性方法都以$开头

所以便于区分一般将axios命名为$http

由于挂载在Vue构造函数的原型上所以在实例中通过this即可访问

基础路径

由于一般请求路径都为重复的地址，多次请求时代码重复且后期维护困难

通过设置默认根路径简化请求地址

//在main.js中
import axios from 'axios'

//全局配置axios的请求根路径
axios.defaults.baseURL = 'http://www.baidu.com'
Vue.prototype.$http = axios 

设置默认请求根路径后，axios的请求就可以省略前面的路径

axios的二次封装

通过挂载全局只能设置一个baseURL，当需要访问多个根路径请求接口时没有复用价值

通过axios.create()方法将axios分成多个小axios，分别设置来实现代码复用

在utils文件夹中定义对应的请求文件

import axios from 'axios'

const axios1 = axios.create({
	baseURL: 'http://api.taobao.com'
})

export default axios1

import axios from 'axios'

const axios2 = axios.create({
	baseURL: 'http://api.jd.com'
})

export default axios2

此时的axios1与axios2不存在关系，分别设置不同的baseURL

当需要发起对应的接口api请求时，引入对应的axios即可

请求代码复用

当发起axios请求时的函数代码也一样时，可以封装为对应的api

引入对应的请求axios，如axios1，处理业务逻辑并return，由于return的为一个axios的Promise

在对应引入的组件await并解构即可

import axios from 'axios';
import { Message } from 'element-ui';

class Http {
    constructor() {
        this.axiosInstance = axios.create({timeout: 30000});
        this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
    }

    // 状态不为200时的错误提示
    requestErrorFn(err) {
        if(err.request.status != 200) {
            Message.error(`请求出错，错误代码: ${err.request.status}，请联系后台管理人员。`);
        }
    }

    // 状态为200时的成功操作
    requestSuccessFn(res) {
        // code为0代表成功
        if(!res) return;
        if(!res.data) return;
        if(res.data.code == 0){
            return res.data;
        } else{
            if(res.data) {
                Message.error(res.data.msg);
            }
        }
    }

    async get(url, params) {
        const res = await this.axiosInstance.get(url, {
            params: params
        }).catch(this.requestErrorFn);
        return this.requestSuccessFn(res);
    }

    /**
     * axios post请求
     * @param url=服务器地址
     * @param params=请求参数
     * @param encode = (如需要传送application/x-www-form-urlencoded格式参数,使用qs.stringify转换) 如果参数是数组的形式，传参数的时候先JSON.stringify（）转化数组，再传过来
     * @param config :object axios得配置
     * @returns {Promise<*>}
     */
    async post(url, data, config={}) {
        const res = await this.axiosInstance.post(url, data, config).catch(this.requestErrorFn);
        return this.requestSuccessFn(res);
    }

    async put(url, data) {
        const res = await this.axiosInstance.put(url, data).catch(this.requestErrorFn);
        return this.requestSuccessFn(res);
    }

    async delete(url, data) {
        const res = await this.axiosInstance.delete(url, data).catch(this.requestErrorFn);
        return this.requestSuccessFn(res);
    }
}

export default new Http();

Vue 3.x将axios挂载为全局属性

在实例中通过this即可访问

import { createApp } from 'vue'
import App from './App.vue'
import Axios from 'axios'

// 原代码
// createApp(App).mount('#app')

// 修改后的代码
const app = createApp(App)
app.config.globalProperties.Axios = Axios
app.mount('#app')

fetch

axios不支持jsonp请求 如果需要用jsonp请求可以使用fetch-jsonp

import fetchJsonp from 'fetch-jsonp'

fetchJsonp('/users.jsonp', {
    jsonpCallback: 'cb',   // 回调函数名称
  })
  .then((response) => {
    return response.json()
  }).then((json) => {
    console.log('parsed json', json)
  }).catch((ex) => {
    console.log('parsing failed', ex)
  })