JavaScript axios安装与封装案例详解_javascript技巧

来源:脚本之家  责任编辑:小易  

1.下载axios插件

cnpm install axios -S

2.在main.js引入axios

import axios from 'axios'
Vue.prototype.$http = axios

3.创建axios实例

let service = axios.create({
    baseURL: baseUrl, // url = base api url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000 // request timeout
})

4.请求拦截

let loading;
// 请求拦截
service.interceptors.request.use(config => {
 
    // loding动画开启
    loading = Toast.loading({
        duration:10000,
        message:"加载中...",
        forbidClick:true,
    })
    //config.headers['Authorization'] = sessionStorage.getItem('token')
    return config
},error =>{
    console.log(error);
    return Promise.reject(error)
})

5.响应拦截

// 响应拦截
service.interceptors.response.use(res =>{
    // 清除loading
    loading.clear()
    return Promise.resolve(res)
},error =>{
    loading.clear()
    console.log('err'+error);
    return Promise.reject(error)
})

6.抛出

// 抛出
export default service

完整代码

// 引入文件
import axios from 'axios'
import {baseUrl} from '@/config'
import {Toast} from 'vant'
 
// 基础配置
let service = axios.create({
    baseURL: baseUrl, // url = base api url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000 // request timeout
})
 
let loading;
// 请求拦截
service.interceptors.request.use(config => {
 
    // loding动画开启
    loading = Toast.loading({
        duration:10000,
        message:"加载中...",
        forbidClick:true,
    })
    //config.headers['Authorization'] = sessionStorage.getItem('token')
    return config
},error =>{
    console.log(error);
    return Promise.reject(error)
})
 
 
// 响应拦截
service.interceptors.response.use(res =>{
    // 清除loading
    loading.clear()
    return Promise.resolve(res)
},error =>{
    loading.clear()
    console.log('err'+error);
    return Promise.reject(error)
})
 
// 抛出
export default service

到此这篇关于JavaScript axios安装与封装案例详解的文章就介绍到这了,更多相关js axios安装与封装内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:Vue.js使用axios动态获取response里的data数据操作vue axios封装httpjs,接口公用配置拦截操作在vue-cli3中使用axios获取本地json操作Emberjs 通过 axios 下载文件的方法基于vue+axios+lrz.js微信端图片压缩上传方法

  • 本文相关:
  • chorme 浏览器记住密码后input黄色背景处理方法(两种)
  • 深入剖析javascript中的枚举功能
  • web基于浏览器的本地存储方法应用
  • js电信网通双线自动选择技巧
  • security.js实现的rsa加密功能示例
  • javascript实现简单获取当前网页网址的方法
  • 原生js绑定滑轮滚动事件兼容常见浏览器
  • 微信小程序实现皮肤功能(夜间模式)
  • 在javascript中实现命名空间
  • javascript之面向对象_动力节点java学院整理
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptvue.js使用axios动态获取response里的data数据操作vue axios封装httpjs,接口公用配置拦截操作在vue-cli3中使用axios获取本地json操作emberjs 通过 axios 下载文件的方法基于vue+axios+lrz.js微信端图片压缩上传方法chorme 浏览器记住密码后input黄色背景处理方法(两种)深入剖析javascript中的枚举功能web基于浏览器的本地存储方法应用js电信网通双线自动选择技巧security.js实现的rsa加密功能示例javascript实现简单获取当前网页网址的方法原生js绑定滑轮滚动事件兼容常见浏览器微信小程序实现皮肤功能(夜间模式)在javascript中实现命名空间javascript之面向对象_动力节点java学院整理js刷新页面方法大全js删除数组里的某个元素方法js中settimeout()的用法详解js页面跳转常用的几种方式js截取字符串常用方法详细整理js数组与字符串的相互转换方法js打开新窗口的2种方式js设置cookie、读取cookie、删除js保留两位小数方法总结js 将json字符串转换为json对象的通过 dom 方法提高 innerhtml 性能实例讲解javascript截取字符串js实现简单的验证码js实现随页面滚动显示/隐藏窗口固定位置元js快速实现简单计算器javascript实现京东快递单号查询js跨域请求数据的3种常用的方法js使用百度地图api自动获取地址和经纬度操javascript的键盘控制事件说明javascript 多种搜索引擎集成的页面实现代
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved