AJAX踩坑指南(知识点补充)

JWT

JSON Web Token是目前最为流行的跨域认证解决方案
如何获取：在使用JWT身份验证中，当用户使用其凭据成功登录时，将返回JSON Web Token(令牌）
Token本质就是一个包含了信息的字符串
如何获取Token:登录成功之后，服务器返回
作用：使用令牌(token)访问页面，调用接口

服务的通过请求头携带的token来判断当前用户是真用户还是假用户

在请求拦截器中配置请求头

config.headers是固定语法，表示给请求头添加自定义属性

// 请求拦截器
service.interceptors.request.use(
  config => {
    if (token) {
      config.headers.Authorization = store.state.token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

参数Content-Type:是发送给后台的数据格式
Authorization才是请求头需要携带的属性

首页页面访问控制思路

其中token放在本地存储中

调用接口时传递token

token过期验证(token是有时效的)

判断token失效后，清除存储数据，然后跳转到登录页
在响应拦截器判断

 if (error.response.status === 401) {
      // 401表示token过期
      router.push('/login')
      //清空token
      store.commit('removeToken')
      
    }

axios拦截器

作用：在请求发送之前，响应回来之后执行一些公共逻辑

请求拦截器

每次请求之前都会经过请求拦截器的代码，config中包含请求的内容
可以在请求拦截器中加入token(但是有一种情况，还没登录的时候，还没生成token，会造成js代码执行逻辑上的一些错误)

// 添加请求拦截器
axios.interceptors.request.use(config=> {
    // 在发送请求之前做些什么
    return config;
  }, err=> {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

举例：给请求投添加token

// 添加请求拦截器(给request添加拦截器)
// axios.interceptors.request.use(function (config) {
// 将axios改为request
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('mobile-token')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

响应拦截器

可以统一处理token失效和数据剥离

// 添加响应拦截器
axios.interceptors.response.use(response=> {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, error=> {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

统一处理token失效

数据剥离

axios返回成功的res中只有一部分是后台返回给的数据，数据都是经过axios包装的数据
数据剥离就是将res.data.data.overflow—>res.data.overflow （在响应拦截器成功的函数中剥离data）

查找报错信息

网络请求的报错信息可以通过网络响应查看

语法

 cardStatus:null  //axios机制，如果这个参数值为null会自动忽略这个值，不携带到服务端

axios简写时get与post的参数传递问题

参考文章

POST提交信息注意点

要求提交的数据类型不全是string

integer就是int类型

const addStudent = async () => {
    // 收集数据+提交+提示
    const data = serialize(form, { hsh: true, empty: true })
    // console.log('学生添加data:', data);
    // 将数据类型隐式转化为int
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    const res = await axios.post('/students', data)
    console.log('res', res);

}

async和await

await后面接的是成功的Promise对象
async包裹之后对外是异步任务，对内是同步任务(await修饰的ajax之后，和下面的console变为同步任务)

举例：这里的loginaction是一个调用AJAX请求的方法，通过，才进行跳转，如果不加await修饰的化，这个方法是异步任务，跳转动作会先执行，
添加async\awiat修饰之后，内部变为了同步动作

项目中引用axios时，创建axios副本进行初始化

// 1. 导入axios
import axios from 'axios'

// 2. 配置(防止更改原来的axios,)
// 创建一个 axios 的副本 （创建一个新的axios实例对象）
const request = axios.create({
  baseURL: 'http://interview-api-t.itheima.net', // 配置请求根路径
  timeout: 5000 // 超时时间
})

// 后期，还可以给 request 配置拦截器等等
// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers.Authorization =
      'Bearer ' + localStorage.getItem('mobile-token')
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 3. 导出
export default request

请求抽离(如果很多页面都要发送请求，请求抽离可以方便复用)

抽离内容：例：

抽离出来：

请求体的请求参数是params还是data

body参数就是data

query参数就是params