axios封装

今天研究下怎么把axios抽离到一个单独文件里面,后期修改请求方法时,一次在单独文件里面全部可以修改。

文章目录

  • 一、axios是什么?
  • 特性
  • 二、使用步骤
  • 原因
  • 怎么抽离
  • 设置接口请求前缀
  • 设置请求头与超时时间
  • 封装请求方法
  • 请求拦截器
  • 响应拦截器


一、axios是什么?

?是一个轻量的HTTP 客户端
基于XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持Promise,支持浏览器和Node.js端。

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON 数据
  • 客户端支持防御XSRF

二、使用步骤

安装

// 项目中安装
npm install axios --S

导入

import axios from 'axios'

发送请求

axios({
  url:'http://',
  method:'GET',
  params:{
	type:'',
	page:1	
  }
}).then(res=>{
	// res为后端返回的数据
	console.log(res)
})

并发请求 axios.all([])

function getUserAccount(){
	return axios.get('/')
}
function getUserPermissions(){
	return axios.get('/')
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(result1,result2){
 // res1第一个请求的返回的内容,res2第二个请求返回的内容
 // 两个请求都执行完成才会执行
}))

原因

???随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍。这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。为了提高我们的代码质量,我们应该在项目中二次封装一下 axios 再使用

怎么抽离

前置需要协商好
一些约定,请求头,状态码,请求超时时间
请求拦截器: 根据请求的请求头设定,来决定哪些请求可以访问
响应拦截器: 这块就是根据 后端`返回来的状态码判定执行不同业务

设置接口请求前缀

??? 利用node环境变量来作判断,用来区分开发、测试、生产环境

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://'
}

??? 在本地调试的时候,还需要在vue.config.js文件中配置devServer实现代理转发,从而实现跨域

devServer:{
 proxy:{
 	'/api':{
 		target:'',
 		changeOrigin:true
 		}
 	}
}

设置请求头与超时时间

??? 大部分情况下,请求头都是固定的,只有少部分情况下,会需要一些特殊的请求头,这里将普适性的请求头作为基础配置。
??? 当需要特殊请求头时,将特殊请求头作为参数传入,覆盖基础配置

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来
        }
  },
})

封装请求方法

??? 先引入封装好的方法,在要调用的接口重新封装成一个方法暴露出去

// get请求
export function httpGet({
  url,params = {}  
}){
	return new Promise((resolve,reject)=>{
	 axios.get(url,{params}).then((res)=>{resolve(res.data)}).catch(err=>{reject(err)})
	 })
}
// post
export function httpPost({url,data={},params={}}){
  return new Promise((resolve,reject)=>{
   axios({
    url,method:'post',
    data,
    params
    })
   }).then(res=>{
    resolve(res.data)
    })
}

把封装的方法放在一个api.js文件中

import {httpGet,httpPost } from './http'
export const getorglist = (params={})=>httpGet({url:'/',params})

页面中就能直接调用

// .vue
import { getorglist  } from 'api'
getorglist({id:200}).then(res=>{console.log(res)})

这样可以把api统一管理起来,以后维护修改只需要在api.js文件操作即可

请求拦截器

请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便

// 请求拦截器
axios.interceptors.request.use(config=>{
 token && (config.headers.Authorization = token)
 return config
},error=>{
   return Promise.error(error)
 }
)

响应拦截器

响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态、授权文章来源地址:https://www.uudwc.com/A/8dRb3/

// 响应拦截
axios.interceptors.response.use(response=>{
 if(response.status === 200){
   if(response.data.code === 511){
     // 未授权调取授权接口
    }else if(response.data.code === 510){
      // 未登录跳转登录页
     }else{
    return Promise.resolve(response)
   }
  }else{
    return Promise.reject(response)
   }
},error=>{
  if(error.response.status){
  // 对异常作统一处理
    return Promise.reject(error.response)
   }
})

原文地址:https://blog.csdn.net/weixin_44423378/article/details/132757344

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇2023年09月14日 22:52
Flink DataStream 体系
下一篇 2023年09月14日 22:53