vue：axios二次封装，接口统一存放

https://www.jianshu.com/p/9077baa9d543

一、基于框架：vue
二、基于http库：axios
三、基本用法：
1.通过node安装：

npm install axios

2. 在项目目录的src文件夹下新建providers文件夹，在该文件夹内新建http-service.js文件，内容如下代码块：

import axios from 'axios';axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://www.baidu.com'; //填写域名//http request 拦截器
axios.interceptors.request.use(config => {config.data = JSON.stringify(config.data);config.headers = {'Content-Type':'application/x-www-form-urlencoded'}return config;},error => {return Promise.reject(err);}
);//响应拦截器即异常处理
axios.interceptors.response.use(response => {return response
}, err => {if (err && err.response) {switch (err.response.status) {case 400:console.log('错误请求')break;case 401:console.log('未授权，请重新登录')break;case 403:console.log('拒绝访问')break;case 404:console.log('请求错误,未找到该资源')break;case 405:console.log('请求方法未允许')break;case 408:console.log('请求超时')break;case 500:console.log('服务器端出错')break;case 501:console.log('网络未实现')break;case 502:console.log('网络错误')break;case 503:console.log('服务不可用')break;case 504:console.log('网络超时')break;case 505:console.log('http版本不支持该请求')break;default:console.log(`连接错误${err.response.status}`)}} else {console.log('连接到服务器失败')}return Promise.resolve(err.response)
})/*** 封装get方法* @param url* @param data* @returns {Promise}*/export function fetch(url,params={}){return new Promise((resolve,reject) => {axios.get(url,{params:params}).then(response => {resolve(response.data);}).catch(err => {reject(err)})})
}/*** 封装post请求* @param url* @param data* @returns {Promise}*/export function post(url,data = {}){return new Promise((resolve,reject) => {axios.post(url,data).then(response => {resolve(response.data);},err => {reject(err)})})}/*** 封装patch请求* @param url* @param data* @returns {Promise}*/export function patch(url,data = {}){return new Promise((resolve,reject) => {axios.patch(url,data).then(response => {resolve(response.data);},err => {reject(err)})})
}/*** 封装put请求* @param url* @param data* @returns {Promise}*/export function put(url,data = {}){return new Promise((resolve,reject) => {axios.put(url,data).then(response => {resolve(response.data);},err => {reject(err)})})
}/**
* 下面是获取数据的接口
*/
/**
* 测试接口
* 名称：exam
* 参数：paramObj/null
* 方式：fetch/post/patch/put
*/
export const server = {exam: function(paramObj){return post('/api.php?ac=v2_djList',paramObj);}
}

3.在main.js内引用以上的http-service.js文件：

import {server} from './providers/http-service'//定义全局变量
Vue.prototype.$server=server;

四、测试用例

export default {methods:{  exam: function(){let paramObj = {uid: '123456'}this.$server.exam(paramObj).then(data => {console.log(data)})}}
}

在网友们写的封装方法基础上做了一些修改，目前在自己的项目组件化中使用，有写的不对的地方欢迎大家留言指出~

作者：Lucia_Huang
链接：https://www.jianshu.com/p/9077baa9d543
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

vue：axios二次封装，接口统一存放相关推荐

axios二次封装以及API接口统一管理
前端向服务器发送请求,使用的方法有很多: XMLHttpRequest.fetch.JQ.axios 1.axios二次封装二次封装axios是为了请求拦截器.响应拦截器. 请求拦截器:可以在发送请 ...
原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
axios二次封装之get请求
今天因为项目上跟后端联调接口时 , 有一个 get 请求 , 需要携带三个参数给后端但是原本项目内简单封装 axios 的 get 请求就显得不那么简便了 (使用了在 url 后面进行拼接携带参数的 ...
ts版axios二次封装
src中创建一个api文件夹,里面有两个文件 request.ts import axios from "axios";export const Service = axios.c ...
vue elementui二次封装el-table带插槽
子组件table封装 html部分 <template><divv-loading="loading"><el-tableref="tabl ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios介绍以及对axios进行二次封装
目录一.axios基础 1.什么是axios? 2.axios的安装 3.axios常用配置项 4.axios和ajax的区别二.使用axios发送请求 1. 发送get无参请求 2. 发送get ...
社会化登录分享-Android SDK的二次封装和使用
本系列文章将第三方的登录分享功能进行二次封装,统一接口调用,简化了接不同平台登录分享的步骤. 0 系列文章系列一 Android SDK的二次封装和使用系列二源码解析系列三微信SDK接入系 ...

vue：axios二次封装，接口统一存放

vue：axios二次封装，接口统一存放相关推荐

最新文章

热门文章