vue中axios的使用
axios的安装与配置:
使用 npm:
$ npm install axios
使用script导入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在vue-cli中使用
import axios from 'axios'
在原型上定义方法,就可以在组件的methods中写this.$http({}),这个$http名字可以自己自定义,但注意不要重复冲突
Vue.prototype.$http=axios
以下请求都以建立在 Vue.prototype.$http=axios 的基础上
.then( (res)=> {
console.log(res)
})
相当于
.then(function(respone) {
console.log(respone)
})
GET请求
发起一个user请求,参数为给定的ID
this.$http.get('/user?ID=1234')
.then((res)=> {
console.log(res)
})
.catch((error) => {
console.log(error);
});
上面的请求也可选择下面的方式来写
this.$http.get('/user',{
params:{
ID:12345
}
})
.then((res)=> {
console.log(res)
})
.catch((error) => {
console.log(error)
});
POST 请求
this.$http.post('/user',{
username:'zjf',
id:07
})
.then((res)=> {
console.log(res)
})
.catch((error) => {
console.log(error);
});
如果觉得传的数据很多,可以封成对象,赋值给变量
let formData = {
username: 'zjf',
sex: '男',
age: 22,
grade: '三'
}
this.$http.post('/user',formData)
.then((res)=> {
console.log(res)
})
.catch((error) => {
console.log(error);
});
发送多个不同的请求
发起一个多重并发请求
function getUserAccount(){
return this.$http.get('/user/12345');
}
function getUserPermissions(){
return this.$http.get('/user/12345/permissions');
}
axios.all([getUerAccount(),getUserPermissions()])
.then( this.$http.spread((acc,pers) => {
//两个请求现在都完成
})
);
可以通过将相关配置传递给 axios 来进行请求。
axios(config)
// 发送一个 POST 请求
this.$http({
method: 'post',
url: '/user/12345',
data: {
Name: 'zjf',
sex:'男'
}
});
this.$http(url[, config])
// 发送一个 GET 请求 (GET请求是默认请求模式)
this.$http('/user/12345');
本地测试配置,利用node的express
webpack.dev.conf.js的配置
const portfinder = require('portfinder')
//在此后添加下面这段代码
const express = require('express') //(express是基于 Node.js 平台,快速、开放、极简的 web 开发框架)
const app = express()
const appData = require('../data.json') // 加载本地json文件
// const seller = appData.seller // 获取对应本地数据
// const goods = appData.goods
// const ratings = appData.ratings
const apiRoutes = express.Router()//创建一个路由
app.use('/api',apiRoutes)
//然后找到devSeerver,在里面添加
before (app) {
app.get('/api/data',(reg,res) => {
res.json({
errno: 0,
data: appData
}) // 接口返回json数据,上面配置的数据appData就复制给data请求后调用
})
//然后就可以在组件created或methods中使用
created () {
this.$http.get('/api/data').then((response) => {
console.log(response.data);
})
}