首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,088 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,369 阅读
3
nps内网穿透实现外网访问树莓派
32,425 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,132 阅读
5
Typecho-Joe-Theme主题帮助文档
24,619 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,305
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
typescript
的结果
2021-01-21
axios请求二次封装,兼容typescript
适合初学者配置使用,只封装了get和post其他类似patch、put和axios.all()的方法得自己动手了,如果遇到项目有多个baseURL的这套封装就显得很不灵活,但一般是不会遇到的,这套简单的封装总的来说够用了,且非常实用。新建https.ts复制下面代码进去引用即可,如果是js版本的把url:any, param:any后面的:any去掉。import axios from 'axios' import qs from 'qs' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头 axios.defaults.baseURL = 'http://192.168.0.6:9000'; //配置接口地址 //POST传参序列化(添加请求拦截器) axios.interceptors.request.use((config) => { //在发送请求之前做某件事 if (config.method === 'post') { config.data = qs.stringify(config.data); } return config; }, (error) => { console.log('错误的传参') return Promise.reject(error); }); //返回状态判断(添加响应拦截器) axios.interceptors.response.use((res) => { //对响应数据做些事 if (!res.data.success) { return Promise.resolve(res); } return res; }, (err) => { if (err.response.status == 504 || err.response.status == 404) { console.log("服务器被吃了⊙﹏⊙∥") } else if (err.response.status == 403) { console.log("权限不足,请联系管理员!") } else { console.log("未知错误") } return Promise.reject(err); }); //返回一个Promise(发送post请求) export function myPost(url: any, params: any) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { resolve(response); }, err => { reject(err); }) .catch((error) => { reject(error) }) }) } ////返回一个Promise(发送get请求) export function myGet(url: any, param: any) { return new Promise((resolve, reject) => { axios.get(url, { params: param }) .then(response => { resolve(response) }, err => { reject(err) }) .catch((error) => { reject(error) }) }) } export default { myPost, myGet, }axios使用方法<template> <div class="home"> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import https from "../https"; //1.引入 @Component({ data() { return { dataList: [] } }, created() { console.log(https) let param = { pageNo: 1, pageSize: 20 }; //2.使用 https.myGet("/case/lists", param).then(res => { console.log(res.data.dataList); this.dataList = res.data.dataList; }) .catch(err => console.log(err)); } }) export default class Home extends Vue {} </script>axios拦截器指定页面添加token// 拦截request,/ 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 if (config.url !== "login") { config.headers['Authorization'] = localStorage.getItem("token"); } return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });接口请求错误处理(status !== 200),应用场景:全局拦截报错信息跳转指定页面(login、home)//返回状态判断(添加响应拦截器) axios.interceptors.response.use((res) => { //对响应数据做些事 if (!res.data.success) { return Promise.resolve(res); } return res; }, (error) => { console.log('网络异常') console.log(error.response.status); //直接打印error打印不出来!!!! // console.log(error.response.data); // console.log(error.response.headers); return Promise.reject(error); });
2021年01月21日
859 阅读
0 评论
0 点赞