文章目录
前言
我们在开发的过程中,时常需要去访问服务器,然而每个请求都需要重新去axios访问,过于麻烦,所以我们在这封装了一个进行请求的方法,并且将接口api化,需要使用时直接引入api方法,使用起来非常的简单。
一、axios是什么?
axios 是一个基于Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,有以下特点:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
二、API接口封装步骤
1.创建拦截器(Interceptor.js)
代码如下(示例):
import axios from "axios";//原生的axios
//用来拦截用的
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
//创建一个单例
const http= axios.create({
baseURL:'接口的前半部分加端口',
timeout:5000,//响应时间
// headers:{"Content-Type":"application/json;charset=utf-8"},
})
//拦截器 -请求拦截
http.interceptors.request.use(config=>{
//部分接口需要token
let token=localStorage.getItem('token');
if(token){
config.headers.token=token;
// config.headers ={
// 'token':token
// }
}
return config;
},err=>{
return Promise.reject(err)
})
//拦截器 -响应拦截
http.interceptors.response.use(res=>{
if(res.data.code===2000){
return Promise.resolve(res.data)
//这里读者们可以根据服务器返回的数据去自行修改
}else{
return Promise.reject(res.data)
}
},err=>{
return Promise.reject(err)
});
//整体导出
export default http;
2.创建存放API的文件(http.js)
代码如下(示例):
//将拦截器整体导入
import request from '@/Interceptor.js'//导入已经写好的拦截器
// 封装所有的API接口
export function Login(params){
console.log(params)
return request({
url:'/administrator/login',
method :'post',
params:params,
})
}
export function getRoles(params={}){
return request({
url:'/Roles/select',
method :'post',
params:params,
})
}
3.使用方法
代码如下(示例):
import { Login } from "@/api/http.js" //按需要去引入方法
Login(Requestparameters).then((res) => {
if (res.code === 2000) {
this.$message({
message: '登录成功!',
type: 'success',
duration: 1500
});
setTimeout(() => {
let token= res.data.token;
localStorage.setItem("token",token);
//有需要存token的就可以在这里存储了
this.$router.push('/index');
//这里就可以转到指定的路由
}, 1550);
} else {
this.$message({
type: 'info',
message: res.message,
duration: 1500
});
}
}).catch((err) => {
console.log(err)
})
本文转自 https://blog.csdn.net/fzy_1939/article/details/125889440,如有侵权,请联系删除。
原文地址:http://www.cnblogs.com/zhubh/p/16895020.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性