Vue前后台数据交互

xinxin_k
260 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情juejin.cn/post/714765…

今天学习了在Vue中如何进行前后台数据交互？

以前学过的ajax和fetch都可以在vue里使用，但是现在vue推荐使用axios。

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

使用方法：

在入口文件main.js里:

  • 1、先import Axios from "axios"
  • 2、把Axios添加到Vue的实例上，这样的话就各个组件通过this.$axios直接使用了，所以在入口文件里写Vue.prototype.$axios=Axios。
  • 也可以单个组件单个引入。
  • 像上面这样，如果把Axios放在vue的实例上，就不需要挨个引入了。

1.png

axios配置：

  1. url：请求接口
  2. method：请求方法，不写的话默认给get请求
  3. transformRequest可以在发送请求之前修改data，return出去的data就是要发给服务器的。该属性值可以是个函数，那么进行拦截的时候只执行这一个函数；值也可以是一个数组，进行拦截的时候，挨个执行函数。函数都接收data和headers两个参数。
  4. transformResponse该函数会把请求回来的数据进行拦截，对数据修改之后进行return，这样axios的promise接收到的就是修改之后的数据
  5. Header：设置请求头
  6. params： params 是与请求一起发送的 URL 参数, 必须是一个简单对象或 URLSearchParams 对象
  7. timeout： timeout 指定请求超时的毫秒数。如果请求时间超过 timeout 的值，则请求会被中断。默认是'0'，永不超时。
  8. withCredentials：跨域的时候是否发送凭证（即是否发送cookie），默认是false，不发送；改为true就是可以进行跨域
  9. baseURL：设置绝对的请求rel，发送请求时会把baseURL和url进行拼接。
  10. proxy：服务器代理
{
proxy: {
    protocol: 'https',//协议
    host: '127.0.0.1', //本机的ip地址
    port: 9000,//端口号
    auth: { username: 'mikeymike', password: 'rapunz3l' } //用户
    },
}

3.png

axios的返回值是promise。服务器返回的数据在then方法的value的data里，也可以使用catch捕获错误

全局默认值

Axios.defaults.baseURL = 'https://api.example.com';//
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//设置的cookie默认值
 Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

  • 拦截器可以放在单文件组件里，也可以放在main.js里，大多数放在入口文件进行拦截
  • 大多数时候都是先进行一些判断，如果怎么样，我返回什么的数据，否则我就返回请求的原数据 2.png

请求拦截器：

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，每次请求携带token传给后端，统一做处理。

响应拦截器：

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态token失效，需要重新登录的时候，跳转到登录页，对不同状态码做不同处理。


import axios from 'axios'
 
//初始化axios
const Axios = axios.create({
  baseURL: '请求地址',
  withCredentials: true, //跨域请求时发送cookies
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  
})
 
//请求拦截器
Axios.interceptors.request.use(
  config => {
    // 判断是否存在token,把token添加到请求头中，每次请求携带token传给后端
    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    //处理错误请求
    return Promise.reject(error)
  }
)
//响应拦截器
service.interceptors.response.use(
    response=> {
        const res = response.data
        if (res.code !== 200) {
            //请求失败（包括token失效，302，404...根据和后端约定好的状态码做出不同的处理）
            return res
        }else{
            //请求成功
            return res
        }
    }
    return config
  },
  error => {
    //处理错误响应
    return Promise.reject(error)
  }
)

取消请求：

  1. 要先创建AbortController对象，然后调用它的abort方法取消请求
  2. const controller = new AbortController();
  3. controller.abort()
avatar
文章
阅读
粉丝