/* axios的请求封装 */
        //axios的原生写法get,post请求
        //第一个参数为请求地址,第二个参数为请求的参数,params是将参数拼接在url的后面
  axios.get(url, {
params: {
id: 1
}
}),
 
 //第一个参数为请求地址,第二个参数为请求的参数,第三个为配置项,可传可不传
  axios.post(url, {
firstName: 'Fred',
lastName: 'Flintstone'
}, {}).then(res => { }).catch(error => {
console.log(error);
})
  封装axios请求的好处:
            1。 因为我们开发项目的环境分为三种环境,分别是:开发环境,测试环境,生产环境,每个环境对应的请求 路径的域名不一样,我们传入的url = 域名(https://baudu.com)+ 路(/api.sv/jdmsding/num), 如果不封装的话,到时候切换环境时,需要找到文件修改各个url,非常麻烦,所以封装可以解决
            2.  封装的话,可以对数据进行请求的拦截,比如我们每次请求时,需要一个token值,那么我们只需要在请求拦截里给他加上token即可,响应拦截,可以根据返回的状态值做出响应的判断        
     //引入axios
import axios form 'axios'; //创建实例的作用是,可以让将baseUrl拼接在url的前面,给axios设置默认值
const instance = axios.create({
balseUrl: "https://baudu.com/api.sv",
timeout: 5000
})
//添加请求拦截---每次发送请求,都会经过请求拦截
instance.interceptors.request.use(function (config) {
//比如,添加了一个请求头
config.headers.token = "12356"
return config
}, function (error) {
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么,比如
if(response.code == 404){
//做些什么
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export function get(url, params) {
return instance.get({
url: url,
params: params
})
}
export function post(url, params) {
return instance.post({
url: url,
data: params
})
}
使用的封装的时候直接 在需要请求的地方引入
        import {get,post} from './request';
然后直接使用
        get(url,params).then(res=>{
        }).catch(error=>{})
        

axios请求的封装的更多相关文章

  1. axios请求方法封装.

    axios的使用上一般封装好对应的方法,ES6导出,直接调用,消息通知使用了ElementUI的Message组件. 这是一个封装了axios的Rest风格的工具类,包扩常用的POST,GET,PUT ...

  2. vue-ajax/axios请求函数封装: axios+promise

    项目文件目录/src/api ajax.js /** * ajax 请求函数模块 * 返回值为promise对象 */ import axios from 'axios' export default ...

  3. vue+axios请求头封装

    import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...

  4. axios请求封装和异常统一处理

    前端网络请求封装前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了a ...

  5. Axios 网络请求组件封装 (鉴权、刷新、拦截)

    一.前言 注意:本教程需要你对axios有一定的了解,不适用于小白(只能借鉴,希望你能自己动手),注释都写的很清楚.此封装并非完整版,已进行部分删减修改操作,但仍然适用于大部分业务场景,如果不适用于你 ...

  6. axios浏览器异步请求方法封装 XMLHttpRequest

    axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...

  7. axios 是如何封装 HTTP 请求的

    原载于 TutorialDocs 网站的文章<How to Implement an HTTP Request Library with Axios>.译者:zhangbao90shttp ...

  8. 基于小程序请求接口 wx.request 封装的类 axios 请求

    基于小程序请求接口 wx.request 封装的类 axios 请求 Introduction wx.request 的配置.axios 的调用方式 源码戳我 feature 支持 wx.reques ...

  9. 运行命令区分webpack环境,以及axios数据请求的封装

    在开发环境和线上环境时,由于环境的不同,有时候需要修改一定的代码,可以通过配置webpack环境来减少对代码的修改:另外,有时候去看别人的代码,你可能都找不到他的数据请求在什么位置,最近在做一个vue ...

随机推荐

  1. 【LeetCode】838. Push Dominoes 解题报告(Python)

    [LeetCode]838. Push Dominoes 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http:// ...

  2. (gcd(a,b) == axorb)==>b = a-gcd(a,b)

    \((gcd(a,b) == axorb)==>b = a-gcd(a,b)\)的证明 \[(gcd(a,b) == axorb)==>b = a-gcd(a,b) \] 证明$$a-b& ...

  3. 【剑指Offer】二叉树的深度 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 日期 题目地址:https://www.nowcoder.co ...

  4. Shortest Path(hdu5636)

    Shortest Path  Accepts: 40  Submissions: 610  Time Limit: 4000/2000 MS (Java/Others)  Memory Limit: ...

  5. CapstoneCS5212替代RTD2166|DP转VGA转换电路设计方法|CS5212替代方案

    Capstone CS5212适用于设计DP转VGA转换电路,主要用在嵌入式单片机基于工业机或者INTEL X86主板上面,也适用于多个电子配件市场和显示器应用程序,如笔记本电脑.主板.台式机.适配器 ...

  6. partial write bypass PIE

    第一篇博客,请允许我水一下.BUUCTF上的一题:linkctf_2018.7_babypie 检查一下保护机制: 1 Arch: amd64-64-little 2 RELRO: Partial R ...

  7. SQL server - if else 与 else if 的正确使用

    两层判断 if a>2 begin print 'a大于2' end else begin print 'a小于等于2' end 注意了  begin - end 之间的代码块不允许空,必须有指 ...

  8. SQL高级优化(五)之执行计划

    一.explain 执行计划:在MySQL中可以通过explain关键字模拟优化器执行SQL语句,从而知道MySQL是如何处理SQL语句的. explain:MySQL执行计划的工具,查看MySQL如 ...

  9. AI系统——梯度累积算法

    明天博士论文要答辩了,只有一张12G二手卡,今晚通宵要搞定10个模型实验 挖槽,突然想出一个T9开天霹雳模型,加载不进去我那张12G的二手卡,感觉要错过今年上台Best Paper领奖   上面出现的 ...

  10. vue2.0多页面开发

    我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是.因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面.但是vu ...