vue项目中axios的封装和使用
一、axios的功能特点
二、常见的配置选项
三、axios封装
第一步:安装axios
npm install axios --save
第二步:在main.js中引入
方式一:必须传三个参数 回调函数的方法
export function request(config, success, failure) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config.baseconfig)
.then(res => {
// console.log(res) //要回调出去
success(res) //回调
})
.catch(err => {
// console.log(err) //要回调出去
failure(err) //回调
})
}
调用:
import {request} from "./network/request"
//方式一:
request({ //config
url: '',
}, res => { //success
console.log(res)
}, err => { //failure
console.log(err)
})
方式二:只传一个config 回调函数的方法
export function request(config) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config.baseconfig)
.then(res => {
// console.log(res) //不能直接在这里处理数据要回调出去
config.success(res) //回调
})
.catch(err => {
// console.log(err) //不能直接在这里处理数据要回调出去
config.failure(err) //回调
})
}
调用:
request({
baseconfig: { },
success: function(res) { },
failure: function(err) { }
})
方式三: Promise方法
export function request(config) {
return new Promise((resolve, reject) => {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config)
.then(res => {
// console.log(res) //要回调出去
resolve(res) //回调
})
.catch(err => {
// console.log(err) //要回调出去
reject(err) //回调
})
})
}
这样写其实是有点多余,因为axios本身返回的是一个promise(下图源码),所以可以直接return,不用自己包装promise
export function request(config) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
return instance(config)
//create 的axios返回值本身是一个promise,所以直接return就可以了,不用自己包装promise
}
调用:
//方式三
request({
url: '',
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
vue项目中axios的封装和使用的更多相关文章
- vue项目中 axios 和Vue-axios的关系
文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码: 今天看到有些项目是这样写的,就有点看不懂了. ----解 ...
- vue项目中的函数封装
项目中一般都会有fun.js这类的文件,里面有各种的如转换时间格式的,处理转换的等等函数方法. 其实经常用到的去获取基本数据的接口也可以封装成一个方法,方便复用. 如上面所标,获取列表数据之前需要先获 ...
- vue.js中axios的封装
基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 如果还对a ...
- 在vue项目中使用自己封装的ajax
在 src 目录下新建 vue.extend.js ,内容如下: export default { install(Vue) { Vue.prototype.$http=function(option ...
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- Vue项目中的http请求统一管理
module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
随机推荐
- zhanghao
账号:wx8b9ddd1c943ce95f 密码:fa72de9a1721849edc7f41f8a81019e5
- CDN-template
ylbtech-CDN: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 9.返回顶部 10.返 ...
- JavaScript中的十种操作符
① 一元操作符(参与的只有一个变量) 前置递增递减(语句解析到递增/递减时值就被改变了) 后置递增递减(整个语句执行后值再改变) 递增递减也可用于字符串,布尔值,对象等,结果都将是数值: ;v ...
- Python笔记(十九)_继承
继承 继承可以把父类的所有功能都直接拿过来,这样就不必从零做起,子类只需要新增自己特有的方法,也可以把父类不适合的方法覆盖重写 多重继承 通过多重继承,一个子类就可以同时获得多个父类的所有功能 > ...
- MySQL点滴记录
1.查询所用引擎 show engines;
- 求bit中1的个数有几种做法
原文 求bit中1的个数有几种做法: - x & (x - 1) - Hamming weight的经典求法,基于树状累加:http://en.wikipedia.org/wiki/Hammi ...
- [Linux] 009 链接命令
链接命令:ln 命令名称:ln 命令英文原意:link 命令所在路径:/bin/ln 执行权限:所有用户 语法:ln -s [原文件] [目标文件] 功能描述:生成链接文件 范例: 创建文件 /etc ...
- Netty之揭开BootStrap 的神秘面纱
客户端BootStrap: Bootstrap 是Netty 提供的一个便利的工厂类, 我们可以通过它来完成Netty 的客户端或服务器端的Netty 初始化.下面我先来看一个例子, 从客户端和服务器 ...
- Ubuntu 18.04安装docker 以及Nginx服务设置
1.安装需要的包sudo apt install apt-transport-https ca-certificates software-properties-common curl 2.添加 GP ...
- 移动端web整理 移动端问题总结,移动web遇到的那些坑
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...