(精华2020年6月9日更新)Angular实战篇 axio的封装

首先先建个axio服务

ng g service 文件目录

ts文件

import { Injectable } from '@angular/core';
import axios from 'axios';
import Qs from 'qs';
axios.defaults.timeout = 5000;
import { environment } from '../../environments/environment';console.log(environment.baseURL);
axios.defaults.baseURL = environment.baseURL; //填写域名
//http request 拦截器  客户端给服务端 的数据
axios.interceptors.request.use(config => {config.headers.common = {'X-API-TOKEN': localStorage.getItem('token'),'version': '1.0','Content-Type': 'application/json;charset=UTF-8'}if (config.data && config.data.form) {//转化成formData格式// transformRequest只能用在 PUT, POST, PATCH 这几个请求方法config.transformRequest = [function (data) {//方式一delete data.form;// var ret = '';// for (let it in data) {//   ret += it+'=' +data[it] + '&';// }// return ret.substring(0,ret.length-1);//方式二：var test2 = Qs.stringify(data);return test2;}]}return config;},error => {return Promise.reject();}
);//响应拦截器即异常处理 -  -- 服务给客户端的数据进行处理
axios.interceptors.response.use(response => {if (response.status === 200) {return Promise.resolve(response);} else {return Promise.reject(response);}// return response
}, err => {if (err && err.response) {var errorMsg = '';switch (err.response.status) {case 400:console.log('错误请求')errorMsg = '错误请求';break;case 401:console.log('未授权，请重新登录');errorMsg = '未授权，请重新登录';break;case 403:console.log('拒绝访问')errorMsg = '拒绝访问';break;case 404:console.log('请求错误,未找到该资源')errorMsg = '请求错误,未找到该资源';break;case 405:console.log('请求方法未允许')errorMsg = '请求方法未允许';break;case 408:console.log('请求超时')errorMsg = '请求超时';break;case 500:console.log('服务器端出错')errorMsg = '服务器端出错';break;case 501:console.log('网络未实现')errorMsg = '请求方法未允许';break;case 502:console.log('网络错误')errorMsg = '网络错误';break;case 503:console.log('服务不可用')errorMsg = '服务不可用';break;case 504:console.log('网络超时')errorMsg = '网络超时';break;case 505:console.log('http版本不支持该请求')errorMsg = 'http版本不支持该请求';break;default:console.log(`连接错误${err.response.status}`)}alert(errorMsg);} else {console.log('连接到服务器失败')}return Promise.resolve(err.response)
})@Injectable({providedIn: 'root'
})
export class AxiosService {constructor() { }//  包装一个 直接利用axios自身是一个Promise对象的思想封装postFun(url, params) {return axios.post(url, params).then(response => {if (response.status == 200) {return Promise.resolve(response.data);//注意必须要有return，相当于new Promise里的resolve，告诉接口已经获取数据}}).catch(err => {})}getFun(url, params = {}) {return new Promise((resolve, reject) => {axios.get(url, {params: params}).then(response => {resolve(response.data);})})}}

(精华2020年6月9日更新)Angular实战篇 axio的封装相关推荐

(精华2020年5月17日更新) vue实战篇手写vue底层源码
MYvue.js 主要作用监听属性变化 class MYvue {constructor(options) {this.$options = options;this.$data = options. ...
(精华2020年5月4日更新) vue教程篇 v-for的使用
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
(精华2020年6月2日更新) TypeScript的数据类型
第一种:布尔类型(boolean) var flag:boolean=true;flag = false; //正确 flag = '你好typescript'; //错误第二种:数字类型(numb ...
.net mysql 类库_(精华)2020年6月27日 C#类库 MySqlHelper(Ado.net数据库封装)
using EFCore.Sharding; using MySql.Data.MySqlClient; using System; using System.Collections.Generic; ...
2020年阴阳师服务器维护,2020阴阳师2月19日更新官方公告及内容汇总
小编今天给各位玩家朋友们带来的是2020阴阳师2月19日更新官方公告及内容汇总,阴阳师今天进行了版本更新,大家期待已久的超鬼王活动也是正式上线了,那么还有哪些精彩的活动?哪些新的内容呢?相信不少的玩家 ...
重装战姬服务器维护,重装战姬2020年10月1日更新维护公告_重装战姬2020年10月1日更新了什么_玩游戏网...
在重装战姬手游中2020年10月1日更新了什么呢?本次更新的的情况内容又是什么呢?不清楚的小伙伴们,接下来就让我们一起来看一下吧! 亲爱的各位团长: 我们将于以下时间,对全平台服务器实施维护,进行游戏 ...
csgo跑图文件_一键跑图！极为方便的CSGO跑图工具（附2020年5月28日更新）
原标题:一键跑图!极为方便的CSGO跑图工具(附2020年5月28日更新) 太长不看版 2020年5月28日更新日志极为方便的CSGO跑图工具,分享给大家 2020年5月28日CSGO更新日志翻译: ...
csgo 放置机器人_一键跑图！极为方便的CSGO跑图工具（附2020年5月28日更新）
太长不看版2020年5月28日更新日志极为方便的CSGO跑图工具,分享给大家 2020年5月28日CSGO更新日志翻译:MeDusA 注:关于国服客户端更新的问题,目前已反馈V社,将尽快修复.国服 ...
利用rfcomm实现树莓派与手机通信_树莓派资源整理汇总(2020年2月18日更新)
本文收集了树莓派使用过程中经常需要用到的资源,主要包括树莓派系统镜像.树莓派硬件介绍.树莓派GPIO引脚编号.树莓派电路原理图下载.树莓派应用.树莓派工具等等,非常值得收藏. 一.快速上手树莓派快速 ...

(精华2020年6月9日更新)Angular实战篇 axio的封装

(精华2020年6月9日更新)Angular实战篇 axio的封装相关推荐

最新文章

热门文章