首页 > 其他分享> > 接口的书写 vue

接口的书写 vue

2022-03-20 13:35:35 作者：互联网

ajax.js中的内容

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