Vue3-知识结构-前后端分离

Vue3知识结构之前后端分离

---

---

一、Promise 对象

是一种异步解决方案
用promise对象来接管异步过程，并且还需要接管受该异步过程影响的逻辑

1. 基本语法

const promiseResult=new Promise(function (resolve){
  resolve();
}).then((data)=>{console.log(data);return data2;
}).then((data2)=>{console.log(data2);
}).catch((err) => console.log(err.message))

2. Promise函数封装

示例

const promiseResult1=promiseFunDemo().then((data)=>{console.log(data);});
function promiseFunDemo(){
  if(numFlag===1){
      const promiseResult=new Promise(function (resolve) {
       setTimeout(()=>{
       console.log(2);
       resolve('resolve')
       },4000)});
      return promiseResult;
  }else if(numFlag==2){
    return Promise.resolve('转换成promise对象');
  }else{
    return Promise.resolve(100);
  }
}

二、Axios

是一个基于promise的HTTP库，可以用在浏览器和node.js中。主要的作用是用于向后台发起请求
1.通过Axios去请求后端接口
2.后端接口响应请求，提供数据
3.前端获取到数据

1.基础使用

在main.js中声明全局属性

import HelperAxios from 'axios'
AppNew.config.globalProperties.$HelperAxios = HelperAxios

通过axios进行 get / delete 请求
在get / delete请求中，params里面的请求参数会被配置在URL中

//具体使用
const promiseReq=proxy.$HelperAxios.get('http://localhost:5013/demo',{params:{id:1,name:'zhangsan'}})
 promiseReq.then((reResult)=>{
   console.log(reResult);
 })

通过axios进行 post / put 请求
在post / put 请求中，请求参数不需要params，被配置在body中

const promiseReq=proxy.$HelperAxios.post('http://localhost:5013/demo',{id:1,name:'zhangsan'})
 promiseReq.then((reResult)=>{
   console.log(reResult);
 })

RESTful风格:
查询： get请求 / 新建： post请求
删除： delete请求 / 修改： put请求

2.二次封装

axios本身是XHR的封装，对axios的封装可以理解为二次封装

1).新建js文件
2).创建axios实例并进行初始化
3).预设网络异常代码；预设接口异常代码
4).封装请求响应函数
5).export导出

封装实例

import axios from "axios";

//创建一个axios实例 初始化
const axiosInstance = axios.create({
    baseURL: 'http://localhost:5678',
    // timeout: 5000,
    headers: { 'X-Custom-Header': 'foobar', 'Authorization': 'kbPpDmex2xNn6eN47AJTp2FEncQHcaWp' }
})

//预设网络异常代码
const jsonHttpcode = {
    A100: 'Continue 继续',
    A101: 'Switching Protocols 切换协议',
    A400: 'Bad Request 客户端请求的语法错误',
    A401: 'Unauthorized 请求要求用户的身份认证',
    A403: 'Forbidden ',
    A404: 'Not Found',
    //...
}
//预设接口异常代码
const jsonApiCode = {
    Fail: 'This is fail',
    Error: 'This is error'
    //....
}
//函数封装
function reqFuncAxios(methodIn, urlIn, reqDataIn, FuncflowIn) {
    let reqAttribute = {
        url: urlIn,
        method: methodIn
    }
    switch (methodIn) {
        case 'put':
        case 'post':
            reqAttribute.data = reqDataIn;
            break;
        case 'delete':
        case 'get':
            reqAttribute.params = reqDataIn;
            break;
    }
    const promiseReq = axiosInstance(reqAttribute);  //调用axios实例请求后端接口
    promiseReq.then((reResult) => {
        if (reResult.status === 200) {
            if (reResult.data.StatusCode === "Success") {
                FuncflowIn(reResult.data)
            }
            else {
                alert(jsonApiCode[reResult.data.StatusCode])
            }
        }
        else {
            alert(jsonHttpcode['A' + reResult.status])
        }
    })
}
export default reqFuncAxios

具体使用

proxy.$reqFuncAxios('get','/Training/demo',{id:1,name:'Lisi'}, (jsonReqResult)=>{
      console.log(jsonReqResult);
  })
proxy.$reqFuncAxios('post','/Training/demo',{id:2,name:'zhsa'}, (jsonReqResult)=>{
      console.log(jsonReqResult);
  })

3.拦截器

在main.js中封装，可以和axios二次封装完成一样的逻辑

请求拦截器

Axios.interceptors.request.use((config)=>{
return config
},(error)=>{return Promise.reject(error)})

响应拦截器

Axios.interceptors.response.use((response)=>{
return response
},(error)=>{return Promise.reject(error)})

三、跨域&请求代理

通过代理解决接口的跨域问题

网址的三要素：协议名+主机名(域名)+端口
//任意一个与当前页面url不同即为跨域
（http 默认端口号 80,https 默认端口号 443）

在vite.config.js添加
server:
port:5633 
proxy:{
  '/api':{
   target: 'axios的请求根路径',
   secure:false,            //协议为https时改为true
   changeOrigin:true,      //是否跨域
   rewrite:(path)=>path.replace(/^\/api/,"")
}}

代理配置后，将请求的接口网址写成配置的端口并加上’/api’，浏览器在请求时会把/api之前的根路径替换成 ‘target’ 里的内容。

const promiseReq=proxy.$HelperAxios.get('http://localhost:5633/api/demo',{params:{id:1,name:'zhangsan'}})
 promiseReq.then((reResult)=>{
   console.log(reResult);
 })