vue封装axios
发布日期:2021-11-08 19:55:32
浏览次数:2
分类:技术文章
本文共 3091 字,大约阅读时间需要 10 分钟。
第一步:下载axios
npm install axios
第二步:
设置请求头及其请求地址 定义一个api文件夹,新建一个index.js文件, 内容如下// 第一步:实例化axios对象,简单封装const axios = require('axios'); // 生成一个axios实例axios.defaults.baseURL = 'http://192.168.1.5:8006/api'; // 设置请求后端的URL地址axios.defaults.timeout = 10000; // axios请求超时时间axios.defaults.withCredentials = true; // axios.defaults.headers['Content-Type'] = 'application/json'; // axios发送数据时使用json格式// axios.defaults.transformRequest = data => JSON.stringify(data); // 发送数据前进行json格式化axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';axios.defaults.transformRequest = [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret}]// 第二:设置拦截器/** * 请求拦截器(当前端发送请求给后端前进行拦截) * 例1:请求拦截器获取token设置到axios请求头中,所有请求接口都具有这个功能 * 例2:到用户访问某一个页面,但是用户没有登录,前端页面自动跳转 /login/ 页面 */axios.interceptors.request.use(config => { // 从localStorage中获取token // let token = localStorage.getItem('token'); // 如果有token, 就把token设置到请求头中Authorization字段中 // token && (config.headers.Authorization = token); return config;}, error => { return Promise.reject(error);});/** * 响应拦截器(当后端返回数据的时候进行拦截) * 例1:当后端返回状态码是401/403时,跳转到 /login/ 页面 */axios.interceptors.response.use(response => { // 当响应码是 2xx 的情况, 进入这里 // debugger return response.data;}, error => { // 当响应码不是 2xx 的情况, 进入这里 // debugger return error});/** * get方法,对应get请求 * @param { String} url [请求的url地址] * @param { Object} params [请求时携带的参数] */export function get(url, params, headers) { return new Promise((resolve, reject) => { axios.get(url, { params, headers }).then(res => { resolve(res) }).catch(err => { reject(err) }) })}// 第三:根据上面分装好的axios对象,封装 get、post、put、delete请求/** * post方法,对应post请求 * @param { String} url [请求的url地址] * @param { Object} params [请求时携带的参数] **/export function post(url, params, headers) { return new Promise((resolve, reject) => { axios.post(url, params, headers).then((res) => { resolve(res) }).catch((err) => { // debugger reject(err) }) })}export function put(url, params, headers) { return new Promise((resolve, reject) => { axios.put(url, params, headers).then((res) => { resolve(res) }).catch((err) => { // debugger reject(err) }) })}export function del(url, params, headers) { return new Promise((resolve, reject) => { axios.delete(url, { data: params, headers }).then((res) => { resolve(res) }).catch((err) => { // debugger reject(err) }) })}export default axios;
接口地址统一管理
新建一个api.js文件 内容如下import { get, post, put, del } from './index'// 用户登录export const Login = (params, headers) => post("user/login", params, headers)
使用
import { Login} from "../api/api" Login(this.user).then(res =>{ console.log("res",res); })
转载地址:https://blog.csdn.net/zhou_xiong1130/article/details/116175936 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月01日 15时33分27秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Uni-App - 组件 - 媒体组件
2019-04-27
Uni-App - 自定义组件 - 上拉加载更多
2019-04-27
Uni-App - 接口 - 第三方登录(小程序)(Hcoder 版)
2019-04-27
Uni-App - 接口 - 第三方登录(H5+ APP)(Hcoder 版)
2019-04-27
Uni-App - 自定义组件 - 自定义组件创建及使用
2019-04-27
Win系统 - Ctrl+C 跨电脑也能 Ctrl+V ?
2019-04-27
浙大版《C语言程序设计(第3版)》题目集 - 习题6-7 简单计算器 (20 分)
2019-04-27
Uni-App - 实战《悦读》之创建项目、后端环境介绍
2019-04-27
Uni-App - 实战《悦读》之封装全局登录检查函数并部署
2019-04-27
Uni-App - 实战《悦读》之APP端微信登录原理、条件编译
2019-04-27
Uni-App - 实战《悦读》之部署 php 环境
2019-04-27
Uni-App - 实战《悦读》之创建用户数据表,完成App端用户登录功能
2019-04-27
Uni-App - 实战《悦读》之微信小程序端登录
2019-04-27
Uni-App - 实战《悦读》之多应用、多平台统一登录关系
2019-04-27
Uni-App - 实战《悦读》之API接口安全策略 - 签名策略
2019-04-27
Uni-App - 学习心得
2019-04-27
Easy Mock - 数据模拟神器
2019-04-27
Uni-App - 基础篇
2019-04-27
响应式 - 基础篇
2019-04-27