数据交互

ajax: 原理必须要能说出来流程即可。

jquery_ajax。我们promise要结合它

Promise + async函数的

前端的主要工作：1. 画页面、2. 请求ajax （后端给你接口和说明书）

有node环境和mysql环境。工作中就不需要搭建mysql环境了。

0.搭建后端接口项目

环境

node + mysql( phpstudy )
打开phpstudy启动mysql
使用navicate导入数据库
1. 先创建一个数据库（ xiaou_shop ）
2. 导入 shop_db.sql

修改代码的数据库配置文件

npm start 启动项目

http://localhost:3000/api/getcate

能出来内容就代表后端接口搭建完成。

一.axios简介

网址:

axios中文网|axios API 中文文档 | axios

axios是一个基于Promise的http库,支持浏览器端和node.js端

从浏览器中创建

XMLHttpRequests
从 node.js 创建

http

请求
支持

Promise

API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御

XSRF

二.安装及配置

npm i axios -S

三.跨域

只要前端向服务器发ajax请求，大概会发生跨域。

很多种方案触发：99%都是后端解决的。

cors 后端
修改服务器代理配置
jsonp(用的很少)

四.配置代理解决跨域: 仅是开发阶段而已

项目目录中u-shop/

vue.config.js

文件，这是vue脚手架的配置文件

module.exports = {
    //设置代理请求
    devServer:{
        proxy:{
            "/api":{
                target:"http://localhost:3000",//目标地址
                "^/api":""
                }
            }
        }
}

 //设置代理请求  同一个项目配置多个地址
module.exports = {
   
    devServer: {
        proxy: {
            "/api1": { // 这是以/api开头的
                target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址
                pathRewrite: {
                    '^/api1': '/apiv1'   // 这种接口配置出来     http://XX.XX.XX.XX:3000/api/login
                }
            },
            "/api2": { // 这是以/api开头的
                target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址
                pathRewrite: {
                    '^/api2': '/apiv2'   // 这种接口配置出来     http://XX.XX.XX.XX:3000/api/login
                }
            }
        }
    }
}

//一个项目中只有一个接口地址
module.exports = {
    //设置代理请求
    devServer: {
        proxy: {
            "/api": { // 这是以/api开头的
                target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址
                
            }
        }
    }
}

重启项目: npm run serve

五.axios请求方式

get方式

axios.get( url?key=value ) 
axios.get( url ,{ params:{  } } ) 

axios.get("http://localhost:3000/api/getcates")
        .then(function(response) { //成功的回调
          console.log(response,'ok');
            //接口返回的数据在 response.data中。因为axios库把返回数据和请求的数据进行了二次包装
        })
        .catch(function(error) { //失败的回调
          console.log(error);
        });

post方式

axio.post( url,{ 参数 } )
let result = await axios.post(api_url + "/api/register",{ phone:'15811111112',password:'123456',nickname:'鲁班' });

axios

let result = await axios({
        url: api_url + "/api/getgoodsinfo",
        method: "get",
        params: {
          //parmas是axios方法决定的
          id: 2 //这个参数是根据后端的接口文档来的
        }
      });

post

let result = await axios({
        url: api_url + "/api/register",
        method: "post",
        data: {
          phone: "15811111113",
          password: "123456",
          nickname: "鲁班小号"
        }
      });

返回结果的解释

{
    config,前端发送ajax的请求头相关的所有配置信息
    data,接口返回的内容
    headers,如果需要设置请求头需要在这里设置，{ authorization:token字符串 }
    status,状态码
    statusText,状态码对应描述
    request,原生ajax的内容
}

baseURL

六.axios的基本应用

6-1get请求

局部引入

在某一个具体的.vue页面中引入axios

全局引入

在main.js中引入axios挂载到Vue的原型链上

import axios from 'axios'
Vue.prototype.$axios = axios

在其它.vue页面可以通过this实例访问到 $axios方法。this.$axios 
async request1(){
    // console.log( this.$axios )
    let result = await this.$axios({
        url: api_url + "/api/getgoodsinfo",
        method: "get",
        params: {
            //parmas是axios方法决定的
            id: 2 //这个参数是根据后端的接口文档来的
        }
    });
    console.log(result, "$axios");
}

全局默认设置

axios.defaults.baseURL = 'http://localhost:3000';

七.axios.create() 了解

axios() 其实就是一个http请求的实例对象

axios.create可以用来自定义axios请求，相当于我们又封装了一个ajax方法

let http = axios.create({
  baseURL: "http://localhost:3000"
});


http({
        url: "/api/getgoodsinfo",
        method: "get",
        params: {
          //parmas是axios方法决定的
          id: 2 //这个参数是根据后端的接口文档来的
        }
      })

八.执行多个并发请求

 function getCates() {
        return axios.get(api_url + '/api/getcates');
      }

function getBanner() {
    return axios.get(  api_url + '/api/getbanner' );
}

axios.all( [getCates(), getBanner()] )
    .then(axios.spread( (cates, banner)=> {
    // 两个请求现在都执行完成
    console.log( cates, banner,'----多并发' )
}));

九.axios拦截器

总结：统一加些操作。比如：

每次打印一上请求地址、响应的结果

每次请求统一加上token

请求拦截器

// 请求拦截器
axios.interceptors.request.use(config=>{
 
  return config
})

<template>
  <div>
      <h2>拦截器</h2>
      <button @click="request1">发送请求</button>
  </div>
</template>

<script>
import axios from 'axios'

let api_url = 'http://localhost:3000'
//1. 响应拦截
axios.interceptors.response.use( res=>{
  //console.log(res,'响应拦截')
  console.group('-------------------------')
  console.log('本次请求地址为:' ,res.config.url)
  console.log('本次结果为：',res.data)
  console.groupEnd('-----')
    return res //否则后面拿不到结果
}  )

//2. 请求拦截，可以统一设置请求的参数，比如统一在headers中加token
  //假设后端的所有接口要求 前端必须通过headers传递一个aa参数为123
axios.interceptors.request.use( config=>{
  // console.log(config,'请求拦截')
  //config.headers.aa = 1234
  config.headers.authorization = 'tokenstring' //登录成功后设置了token字符串到locastorage，从缓存中获取的
  return config  //必须return，否则请求信息不会发送给服务器
} )

export default {
    methods:{
      async request1(){
          let result = await axios.get(api_url + '/api/getcates');
          //console.log(result,'request1触发了')
      },
      async request2(){

      }
    }
}
</script>

<style>

</style>

响应拦截器

// 响应拦截器
axios.interceptors.response.use(res=>{
 	return res
})

axios.interceptors.response.use( res=>{
  // console.log(res,'响应拦截')
  console.group('-------------------------')
  console.log('本次请求地址为:' ,res.config.url)
  console.log('本次结果为：',res.data)
  console.groupEnd('-----')
    return res //否则后面拿不到结果
}  )

十.请求层的封装

get请求

let get = ( url,params = {} )=>{
    return axios.get( url,{ parmas } )
}

封装post 请求

let post = ( url , parmas = {} )=>{
    return axios.post( url,parmas )
}

你们公司的项目可能过半年或一年，页面风格要变。但是？万一接口地址变了呢？

之前上线了一版，半年后风格变了又一版，当接口地址变了，那么之前的html页面的地址就都不对了。所以也要对前端中具体的页面中调用的接口也要统一一个封装。

api.js

实战

原文链接：https://blog.csdn.net/weixin_60488295/article/details/121775413