Axios 二次封装（超详细）

简单封装get，post请求，携带token控制

先导入axios 和qs包

创建http.js文件模块进行axios封装

每个代码都有注释，方便初学者学习

import axios from "axios";
//带三方类库
import qs from 'qs'
// 配置不同环境下，调用不同接口switch(process.env.NODE_ENV){// 生产环境，部署到服务器上的环境case 'production':axios.defaults.baseURL='http://api.zhengqinan.cn';break;//设置测式环境的接口地址case 'text':axios.defaults.baseURL='http://api.zhengqinantext.cn';break;//开发环境接口地址default:axios.defaults.baseURL='http://api.kaifa.cn'
}
/*** 设置超时时间和跨域是否允许携带凭证*/
axios.defaults.timeout=10000  //设置十秒
axios.defaults.withCredentials=true ;//例如：登录校验session和cookie
/*** 设置请求数据参数传递的格式，默认是json格式，但是在登录校验中后台一般设置请求格式：x-www-form-urlencoded(name=xxx,age=xxx)* 看服务器要求什么格式*/
axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded' //声明请求格式
axios.defaults.transformRequest=data=>qs.stringify(data)  //qs是第三方库，转换为x-www-form-urlencoded
/*** 设置请求拦截器：----在项目中发请求（请求没有发出去）可以做一些事情* 客户端->[请求拦截器]->服务器端* token校验（JWT）：接收到服务器的token,存储到vuex/本地存储中，每次向服务器发送请求，我们应该把token带上* config :发起请求的请求配置项*/
axios.interceptors.request.use(config=>{let token=localStorage.getItem('token')token && (config.headers.Authoriztion=token)return config
},error=>{return Promise.reject(error)
})
/*** 设置响应拦截器* 服务器端返回信息->[响应拦截器]->客户端js获取到信息* response中包含属性：* data：相应数据,status:响应状态码,statusText：响应状态信息,headers：响应头,config：响应提供的配置信息,request*/
axios.interceptors.response.use(response=>{return response.data //将主体内容返回  axios.get().then(result=>{拿到的就是响应主体})
},error=>{let { response}=error// 如果有返回结果if(response){switch(response.status){//这里面根据公司需求进行写case 404://进行错误跳转之类break;  }}else{//服务器没有返回结果 分两种情况 断网  服务器崩了if(!window.navigator.onLine){//断网处理：跳转到断网页面return}return Promise.reject(error)}
})

2.这里可以分页面进行创建接口请求文件

使用post 和get进行请求

import axiosHttp from './http.js'
export const getuserinfor=(params)=>{return axiosHttp({method:'get',url:'user/xxxx',params})
};
export const login=(data)=>{return axiosHttp({method:'post',url:'login/xxxxx',data,})
}

3.在代码中进行使用先导入模块，再进行使用

<template></template><script>
import { login } from "../api/user.js";
export default {data() {return {};},methods: {async getlogin() {let params = {emile: 123,name: "zhangsna",};let data = await login(params);},},
};
</script><style>
</style>

Axios 二次封装（超详细）相关推荐

原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
axios二次封装以及API接口统一管理
前端向服务器发送请求,使用的方法有很多: XMLHttpRequest.fetch.JQ.axios 1.axios二次封装二次封装axios是为了请求拦截器.响应拦截器. 请求拦截器:可以在发送请 ...
axios二次封装之get请求
今天因为项目上跟后端联调接口时 , 有一个 get 请求 , 需要携带三个参数给后端但是原本项目内简单封装 axios 的 get 请求就显得不那么简便了 (使用了在 url 后面进行拼接携带参数的 ...
vue：axios二次封装，接口统一存放
https://www.jianshu.com/p/9077baa9d543 一.基于框架:vue 二.基于http库:axios 三.基本用法: 1.通过node安装: npm instal ...
Js实现拖拽 --面向对象封装( 超详细中文注释)
这类文章网上的很多.我只是做了详细的中文注释.便于大家理解. --废话不多说直接上源码 (用到的图片请随便自己代替) javascript代码部分: 1 /**js拖拽特效封装*/ 2 //关于js ...
ts版axios二次封装
src中创建一个api文件夹,里面有两个文件 request.ts import axios from "axios";export const Service = axios.c ...
Java记账本小项目二（图解超详细）
继续上一篇博客,博客地址在这:https://blog.csdn.net/qq_41115379/article/details/112795150 接下来根据功能演示如何开发一个一个的Panel M ...
axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios介绍以及对axios进行二次封装
目录一.axios基础 1.什么是axios? 2.axios的安装 3.axios常用配置项 4.axios和ajax的区别二.使用axios发送请求 1. 发送get无参请求 2. 发送get ...
三、Hive数据仓库应用之Hive数据操作语言（超详细步骤指导操作，WIN10，VMware Workstation 15.5 PRO，CentOS-6.7）
Hive远程模式部署参考: 一.Hive数据仓库应用之Hive部署(超详细步骤指导操作,WIN10,VMware Workstation 15.5 PRO,CentOS-6.7) Hive数据定义语言 ...

Axios 二次封装（超详细）

简单封装get，post请求，携带token控制

Axios 二次封装（超详细）相关推荐

最新文章

热门文章