标签：vue return 请求 get url 书写 接口 axios const
ajax.js中的内容
//这个文件是对axios进行二次封装
//额外的让axios发请求的时候，具有其它的功能
// 配置基础路径和超时限制
// 添加进度条信息 nprogress
// 返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
// 统一处理请求错误, 具体请求也可以选择处理或不处理
import axios from 'axios'
// 引入nprogress相关的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
//以后只要是对axios二次封装，不会在axios身上直接去封装，而是创建一个新的axios实例进行封装
//axios.create()创建一个新的和axios具有相同功能的一个实例
const service = axios.create({
//配置基础路径和超时限制
baseURL: '/api', //设置，当前项目当中所有接口路径的公共路径部分，基础路径
timeout: 20000,//当ajax请求超过设置的这个事件就会报错
});
// 添加进度条信息功能 nprogress
// 以后如果你想对axios添加额外的功能或者是给请求头添加额外的信息
// 必然用到axios的请求拦截器和响应拦截器
//请求拦截器，每个ajax请求都要经过这个拦截器去拦截
service.interceptors.request.use(
// 请求拦截器当中成功的回调
(config)=>{
// config其实就是我们的请求报文
// 这个请求报文，最后一定要返回去，因为还要继续往下走
//在这里我们可以添加额外的功能，也可以给请求头添加需要的数据
NProgress.start(); //开启进度条
//请求头内部需要添加临时标识，后期每个请求都会带上这个临时标识
let userTempId = store.state.user.userTempId
if(userTempId){
config.headers.userTempId = userTempId
}
//登录成功后，需要把token添加到请求头当中，从今往后所有的请求当中都要带上这个token
let token = store.state.user.token
if(token){
config.headers.token = token
}
return config
},
// 请求拦截器当中失败的回调一般不写，因为失败了，也就没有下文了
// () => {
// }
);
//响应拦截器
//返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
//统一处理请求错误, 具体请求也可以选择处理或不处理
service.interceptors.response.use(
(response) => {
//response其实就是我们的响应报文
//我们也是可以添加额外功能或者对响应报文进行处理
NProgress.done(); //停止进度条
return response.data //返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
},
(error) => {
NProgress.done(); //停止进度条
//可以统一处理错误
alert('发送ajax请求失败'+error.message||'未知错误')
//统一处理完成之后，这个错误可以让后面继续处理
// return Promise.reject(new Error('发送ajax请求失败')) //后面想继续处理这个错误，返回失败的promise
//也可以不让后面继续处理这个错误，中断promise链
return new Promise(() => {}) //返回的是pending状态的promise，代表中断promise链，后期也就没办法处理了
}
);
export default service //把封装好的axios实例，暴露出去，后面去用
index.js中的内容
//这个文件写的都是函数，我们叫接口请求函数
//以后，我们的每个接口都对应了一个函数，如果想要拿相关接口的数据，只需要调用相关的接口请求函数
//axios使用 函数用法 对象用法
// 三种参数 params参数 query参数 请求体参数
// params参数 是在url当中携带的,属于路径一部分
// query参数，可以在url当中携带 ？分割，后面就是query参数
// 也可以在配置对象当中配置，配置的属性名叫params
// 请求体参数，在配置对象当中data里面配置，请求方式是put和post才有请求体参数
// axios({
// url:'localhost:8080/userinfo/1?name=zhaoliying',
// method:,
// params:{
// //代表的是query参数
// name:'zhaoliying'
// },
// data:{
// //配的是请求体参数
// }
// })
import request from './ajax'
import mockAjax from '@/api/mockAjax'
//请求三级分类列表数据
///api/product/getBaseCategoryList
//get
//无参
export const reqCategoryList = () => {
return request({
url:'/product/getBaseCategoryList',
method:'get'
})
}
//验证请求是否成功
// reqCategoryList() //这里如果要调用，得把模块引入到main当中
//请求获取模拟接口的数据banner和floor
export const reqBannerList = () => {
return mockAjax({
url:'/banner',
method:'get'
})
}
export const reqFloorList = () => {
return mockAjax({
url:'/floor',
method:'get'
})
}
//请求获取search页面的数据
// /api/list
// post
// 请求体参数，一个对象
export const reqSearchInfo = (searchParams) => {
return request({
url:'/list',
method:'post',
data:searchParams//searchParams是用户搜索的参数，这个参数是用户在发请求的时候给传递的
})
}
//这个请求参数，searchParams必须是一个对象，可以是空对象，但是必须传，不能不传
//其实用户发请求的时候，这个参数给空对象{}，也是可以获取到数据的，代表获取商品默认搜索的数据
// 测试
// reqSearchInfo({})
// 请求获取详情数据
///api/item/{ skuId }
//get
export const reqDetailInfo = (skuId) => {
return request({
url:`/item/${ skuId }`,
method:'get'
})
}
// 请求添加购物车（修改购物车的商品数量）
// /api/cart/addToCart/{ skuId }/{ skuNum }
// POST
export const reqAddOrUpdateShopCart = (skuId,skuNum) => {
return request({
url:`/cart/addToCart/${ skuId }/${ skuNum }`,
method:'post'
})
}
//请求获取购物车页面数据
// /api/cart/cartList
// get
export const reqshopCartInfo = () => {
return request({
url:'/cart/cartList',
method:'get'
})
}
//请求修改购物车选中状态
///api/cart/checkCart/{skuId}/{isChecked}
// GET
export const reqUpdateCartIscheck = (skuId,isChecked) => {
return request({
url:`/cart/checkCart/${skuId}/${isChecked}`,
method:'get'
})
}
//请求删除购物车数据
///api/cart/deleteCart/{skuId}
//DELETE
export const reqDeleteShopCart = (skuId) => {
return request({
url:`/cart/deleteCart/${skuId}`,
method:'delete'
})
}
//请求注册用户
///api/user/passport/register
//post
//参数：请求体 code phone password
export const reqUserRegister = (userInfo) => {
return request({
url:'/user/passport/register',
method:'post',
data:userInfo
})
}
//请求获取用户注册验证码
///api/user/passport/sendCode/{phone}
//get
export const reqGetCode = (phone) => {
return request({
url:`/user/passport/sendCode/${phone}`,
method:'get'
})
}
//请求用户登录
///api/user/passport/login
//post
//返回 这里返回的东西不严谨，按道理来讲，登录成功以后，只返回token，不会有其它的数据
//而其它的用户数据，需要重新根据token发请求获取（token校验）
// data:{
// nickName:"Administrator",
// name:"Admin",
// token: 90aa16f24d04c7d882051412f9ec45b"
// }
export const reqUserLogin = (userInfo) => {
return request({
url:'/user/passport/login',
method:'post',
data:userInfo
})
}
//根据token请求获取用户的信息
///api/user/passport/auth/getUserInfo
//参数token已经在请求头当中添加了
//get
export const reqGetUserInfo = () => {
return request({
url:'/user/passport/auth/getUserInfo',
method:'get'
})
}
//请求退出登录
///api/user/passport/logout
//get
export const reqUserLogout = () => {
return request({
url:'/user/passport/logout',
method:'get'
})
}
//请求获取用户的收货地址信息
///api/user/userAddress/auth/findUserAddressList
//get
export const reqUserAddressList = () => {
return request({
url:'/user/userAddress/auth/findUserAddressList',
method:'get'
})
}
//请求获取订单交易页面信息
///api/order/auth/trade
//get
export const reqTradeInfo = () => {
return request({
url:'/order/auth/trade',
method:'get'
})
}
// reqUserAddress()
// reqTradeInfo()
//请求提交创建订单
///api/order/auth/submitOrder?tradeNo={tradeNo}
//post
export const reqSubmitOrder = (tradeNo,tradeInfo) => {
return request({
url:`/order/auth/submitOrder?tradeNo=${tradeNo}`,
method:'post',
data:tradeInfo
})
}
//请求获取支付信息
// /api/payment/weixin/createNative/{orderId}
//get
export const reqPayInfo = (orderId) => {
return request({
url:`/payment/weixin/createNative/${orderId}`,
method:'get'
})
}
// 请求获取订单支付状态
// /api/payment/weixin/queryPayStatus/{orderId}
// get
export const reqPayStatus = (orderId) => {
return request({
url:`/payment/weixin/queryPayStatus/${orderId}`,
method:'get'
})
}
//请求获取我的订单列表数据
///api/order/auth/{page}/{limit}
//get
export const reqMyOrderInfo = (page,limit) => {
return request({
url:`/order/auth/${page}/${limit}`,
method:'get'
})
}
mockAjax.js中的内容
//这个文件是对axios进行二次封装
//额外的让axios发请求的时候，具有其它的功能
// 配置基础路径和超时限制
// 添加进度条信息 nprogress
// 返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
// 统一处理请求错误, 具体请求也可以选择处理或不处理
import axios from 'axios'
// 引入nprogress相关的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//以后只要是对axios二次封装，不会在axios身上直接去封装，而是创建一个新的axios实例进行封装
//axios.create()创建一个新的和axios具有相同功能的一个实例
const service = axios.create({
//配置基础路径和超时限制
baseURL: '/mock', //设置，当前项目当中所有接口路径的公共路径部分，基础路径
timeout: 20000,//当ajax请求超过设置的这个事件就会报错
});
// 添加进度条信息功能 nprogress
// 以后如果你想对axios添加额外的功能或者是给请求头添加额外的信息
// 必然用到axios的请求拦截器和响应拦截器
//请求拦截器，每个ajax请求都要经过这个拦截器去拦截
service.interceptors.request.use(
// 请求拦截器当中成功的回调
(config)=>{
// config其实就是我们的请求报文
// 这个请求报文，最后一定要返回去，因为还要继续往下走
//在这里我们可以添加额外的功能，也可以给请求头添加需要的数据
NProgress.start(); //开启进度条
return config
},
// 请求拦截器当中失败的回调一般不写，因为失败了，也就没有下文了
// () => {
// }
);
//响应拦截器
//返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
//统一处理请求错误, 具体请求也可以选择处理或不处理
service.interceptors.response.use(
(response) => {
//response其实就是我们的响应报文
//我们也是可以添加额外功能或者对响应报文进行处理
NProgress.done(); //停止进度条
return response.data //返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
},
(error) => {
NProgress.done(); //停止进度条
//可以统一处理错误
alert('发送ajax请求失败'+error.message||'未知错误')
//统一处理完成之后，这个错误可以让后面继续处理
// return Promise.reject(new Error('发送ajax请求失败')) //后面想继续处理这个错误，返回失败的promise
//也可以不让后面继续处理这个错误，中断promise链
return new Promise(() => {}) //返回的是pending状态的promise，代表中断promise链，后期也就没办法处理了
}
);
export default service //把封装好的axios实例，暴露出去，后面去用
标签：vue,return,请求,get,url,书写,接口,axios,const 来源： https://blog.csdn.net/weixin_45731789/article/details/123611382
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。