目录一、安装axiOS二、简单使用1.配置2.发送请求三、封装使用1.创建js封装类2.配置3.发送请求一、安装axios npm install axios --save 二、简单
npm install axios --save
main.js中加入如下内容
// 引入axios ---------------------------------------------------
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.prototype.$axios.defaults.baseURL = 'Http://127.0.0.1:8000/' // 请求根路径
// -------------------------------------------------------------
<1>get
this.$axios.get('index').then(res => {
// 返回数据在 res.data 中
})
<2>post
this.$axios.post('login', {user:"admin", pwd:"123"}).then(res => {
// 返回数据在 res.data 中
})
<3>并发
var res1 = this.$axios.get('index')
var res2 = this.$axios.post('login', {user:"admin", pwd:"123"})
this.$axios.all([res1, res2]).then(this.$axios.spread(res1, res2) => {
// 两个请求的返回结果在 res1 和 res2 中
})
src/request/index.js
// 引入
import Axios from 'axios'
import { Message } from 'element-ui' // 需要装个 element-ui,错误提示界面友好一些
// 前端存在 localStorage 中的 token
const token = localStorage.getItem('token')
// 实例化
const request = Axios.create({
baseURL: "http://127.0.0.1:8000/", // 服务根路径
timeout: 200000, // 请求过期时间
headers: {
Authorization: token // token 插入请求头给后端校验
}
})
// 拦截后端返回的请求
request.interceptors.response.use(res => {
if (res.status !== 200) {
Message.error("something err...") // 返回错误的提示信息
}
return res.data // 只取 res 中的 data,后续取值不需要再写一层 data 了
})
// 导出
export default request
main.js中改成如下内容
// 引入axios ---------------------------------------------------
import request from './request'
Vue.prototype.$http = request
// -------------------------------------------------------------
<1>get
this.$http.get('index').then(res => {
// 返回数据在 res.data 中
})
<2>post
this.$http.post('login', {user:"admin", pwd:"123"}).then(res => {
// 返回数据在 res.data 中
})
<3>并发
var res1 = this.$http.get('index')
var res2 = this.$http.post('login', {user:"admin", pwd:"123"})
this.$http.all([res1, res2]).then(this.$http.spread(res1, res2) => {
// 两个请求的返回结果在 res1 和 res2 中
})
到此这篇关于Vue使用axios发送请求并实现简单封装的文章就介绍到这了,更多相关Vue axios发送请求封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue使用axios发送请求并实现简单封装的示例详解
本文链接: https://www.lsjlt.com/news/153093.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0