npm 安装 axios
npm install axios -s
axios 发送请求 usage
axios内置了promise模块
const axios = require('axios');
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
console.log('finally')
});
传参方式也可为对象形式
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
console.log('finally')
});
使用async await
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
封装axios 请求
对axios进行二次封装
export default class Http{
static async request(method, url, data){
// 发送请求
const response = await axios.request({
method,
url,
// baseURL: HOST,
params: method === 'GET' ? data : null,
data: method === 'POST' ? data : null
});
// 判断是否成功
return this.isSuccess(response);
};
// 判断响应结果是否成功
static isSuccess(res){
if(res.status >= 200 && res.status < 300){
return res;
}else{
this.requestExpection(res);
}
};
// 构建失败对象
static requestExpection(res){
throw new Error(res);
};
// get便捷方法
static get(url, data){
return this.request('GET', url, data);
};
// post便捷方法
static post(url, data){
return this.request('POST', url, data);
}
}
Vue中请求数据方式
1.在根目录下创建一个Vue.config.js文件,配置正向代理
module.exports = {
devServer: {
open: true,
proxy: {
'/api': {
target: 'http://localhost:9000'
}
}
}
}
2.在生命周期函数created中请求数据
homeService.js
import Http from 'Http'
import Api from 'Api'
export const requestGoodsDetailData = async (goodsId)=>{
const {data: result} = await Http.get(api.GOODS_DETAIL_API, {id: goodsId});
let banner = [result.data.listPicUrl];
Object.entries(result.data.itemDetail).forEach(([key, value])=>{
key.startsWith('picUrl') && banner.push(value);
})
// 原价
let retailPrice = result.data.retailPrice;
// 现价
let counterPrice = result.data.counterPrice;
// 详情
let detail = result.data.itemDetail.detailHtml;
// 视频
let videoInfo = result.data.itemDetail.videoInfo;
// 选择列表
let skuSpecList = [...result.data.skuSpecList];
return {
retailPrice,
counterPrice,
banner,
detail,
videoInfo,
}
}
export default {
requestGoodsDetailData
}
Detail.vue
<template>
</template>
<script>
import {requestGoodsDetailData} from 'homeService'
export default {
data(){
return{
goodsData: {},
id:0
}
},
methods:{
aysnc initData(){
this.goodsData = await requestGoodsDetailData(this.id);
}
},
created(){
this.initData();
}
}
</script>
<style>
</style>
在VueX中的action模块中请求数据
address.js
import addressService from 'addressService'
const state = {
addressList: [],
}
const getters = {
selectAddress(state){
if(state.addressList.length > 0){
return state.addressList[state.selectIndex];
}else{
return null;
}
}
}
const mutations = {
setAddressList(state, value){
state.addressList = value;
},
setSelectIndex(state, value){
state.selectIndex = value;
}
}
const actions = {
async getAddressAction(context){
console.log('请求地址列表');
let list = await addressService.requestAddressList();
context.commit('setAddressList', list);
}
}
export default {
namespaced: true,
getters,
state,
mutations,
actions
}
Address.vue
<template>
</template>
<script>
export default {
methods:{
getData(){
this.$store.dispatch('address/getAddressAction');
}
},
created(){
this.getData();
}
}
</script>
<style>
</style>