浏览器向服务器发送请求及使用基本步骤

 浏览器向服务器发送请求并得到数据的过程

一.发送Ajax请求步骤

1. 引入axios并实现请求拦截和响应拦截

   // axios用于向服务器发请求
   //引入axios,主要用于实现请求拦截器和响应拦截器
   import axios from 'axios';
   // 引入进度条
   import nprogress from 'nprogress';
   // 进度条的显示需要引入进度条样式
   import 'nprogress/nprogress.css';
   import store from '@/store';
   // 利用axios的create方法,创建axios的实例
   const requests = axios.create({
       // 基础路径
       baseURL: '/api',
       timeout: 5000,
   });
   
   
   // // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
       return config;
      }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      });
   
   
   
   // 添加响应拦截器
   axios.interceptors.response.use(function (response) {
       // 2xx 范围内的状态码都会触发该函数。
       // 对响应数据做点什么
       return response;
     }, function (error) {
       // 超出 2xx 范围的状态码都会触发该函数。
       // 对响应错误做点什么
       return Promise.reject(error);
     });
   export default requests;

 2.利用axios向对应接口发送请求

// 发请求需要axios
import requests from "./request";
// mock数据模拟
import mockRequests from './mockAjax';

// axios发送请求的两种方式

// 1.   axios作为对象去调用get post put delete方法发送请求
// axios.get('url')

//2.   作为函数使用发送请求  参数为js配置对象
// axios({})

// 3.首页三级分类   3.1请求地址: /api/product/getBaseCategoryList   3.2请求方式：GET
// 在home/index.js中获取的reqCategoryList
export const reqCategoryList = () => requests({ url: '/product/getBaseCategoryList', method: 'get' });

// 4.搜索商品     4.1请求地址:/api/list    4.2请求方式:POST    有可不带的参数
// 在search/index.js中获取的reqGetSearchInfo
// 当前这个接口给服务器传参数（至少是一个空对象）
// 当为post请求时，数据存放在data中，而不是params中
export const reqGetSearchInfo = (params) => requests({ url: '/list', method: 'post', data: params })

// 5.获取商品详情    5.1请求地址:/api/item/{ skuId }      5.2请求方式:GET   必带参数：skuId
// 在detail/index.js中获取的reqGoodsInfo
export const reqGoodsInfo = (skuId) => requests({ url: `/item/${skuId}`, method: 'get' });

// 7.添加到购物车(对已有物品进行数量改动)7.1请求地址:/api/cart/addToCart/{ skuId }/{ skuNum } 7.2请求方式:POST
// 在detail/index.js中获取的reqAddOrUpdateShopCart
export const reqAddOrUpdateShopCart = (skuId, skuNum) => requests({ url: `/cart/addToCart/${skuId}/${skuNum}`, method: 'post' });

// 6.获取购物车列表   6.1请求地址:/api/cart/cartList   6.2请求方式:GET
// 在shopcart/index.js中获取reqCartList
export const reqCartList = () => requests({ url: '/cart/cartList', method: 'get' });

// 9.删除购物车商品      9.1请求地址:/api/cart/deleteCart/{skuId}        9.2请求方式:DELETE
// 在shopcart/index.js中获取reqDeleteCartById
export const reqDeleteCartById = (skuId) => requests({ url: `/cart/deleteCart/${skuId}`, method: 'delete' })

// 8.切换商品选中状态    8.1请求地址:/api/cart/checkCart/{skuID}/{isChecked}      8.2请求方式:GET
// 在shopcart/index.js中获取reqUpdateCheckedByid
export const reqUpdateCheckedByid = (skuId, isChecked) => requests({ url: `/cart/checkCart/${skuId}/${isChecked}`, method: 'get' });

// 15.获取注册验证码      15.1请求地址:/api/user/passport/code      15.2请求方式:GET
// 在user/index.js中获取reqGetCode
export const reqGetCode = (phone) => requests({ url: `/user/passport/sendCode/${phone}`, method: 'get' });

// 16.注册用户      16.1请求地址：/api/user/passport/register      16.2请求方式：POST
// 在user/index.js中获取reqUserRegister
export const reqUserRegister = (data) => requests({ url: '/user/passport/register', data, method: 'post' });

// 2.登录            2.1请求地址：/api/user/passport/login            2.2请求方式：POST
// 在user/index.js中获取reqUserLogin
export const reqUserLogin = (data) => requests({ url: '/user/passport/login', data, method: 'post' });

// 在user/index.js中获取reqUserInfo
export const reqUserInfo = () => requests({ url: '/user/passport/auth/getUserInfo', method: 'get' });

// 17.退出登陆    17.1请求地址：/api/user/passport/logout        17.2请求方式：GET
// 在user/index.js中获取reqLogout
export const reqLogout = () => requests({ url: '/user/passport/logout', method: 'get' });

// 在trade/index.js中获取reqAddressInfo
export const reqAddressInfo = () => requests({ url: '/user/userAddress/auth/findUserAddressList', method: 'get' });

// 10.获取订单交易页信息    10.1请求地址:/api/order/auth/trade     10.2请求方式:GET
// 在trade/index.js中获取reqOrderInfo
export const reqOrderInfo = () => requests({ url: '/order/auth/trade', method: 'get' });

// 12.提交订单    12.1请求地址:/api/order/auth/submitOrder?tradeNo={tradeNo}      12.2请求方式:POST
export const reqSubmitOrder = (tradeNo, data) => requests({ url: `/order/auth/submitOrder?tradeNo=${tradeNo}`, data, method: 'post' });

// 13.获取订单支付信息    13.1请求地址:/api/payment/weixin/createNative/{orderId}    13.2请求方式:GET
export const reqPayInfo = (orderId) => requests({ url: `/payment/weixin/createNative/${orderId}`, method: 'get' });
                                    //   mock数据模拟
// 在home/index.js中获取的reqGetBannerList
export const reqGetBannerList = () => mockRequests.get('/banner');

// 在home/index.js中获取的reqFloorList
export const reqFloorList = () => mockRequests.get('/floor');

 发送axios有两种方式：

•  axios作为对象去调用get post put delete方法发送请求，例如： expormockRequests.get('/floor');

• 作为函数使用发送请求  参数为js配置对象，例如： requests({ url: '/product/getBaseCategoryList', method: 'get' });.

   

二.数据请求成功之后的使用

1.利用vuex三连环实现数据获取和使用

• 在store仓库中引入api下的相应的请求数据的接收值
• 在路由组件中，向仓库中请求数据
•  先在仓库中的actions接受

注释：如果服务器有返回数据，则需要再到mutations和state进行操作