vue3 axios

 

 

默认情况下，vue中并没有对ajax进行封装的，所以我们需要下载安装第三方httpajax工具包---axios。

官方文档：https://axios-http.com/zh/docs/intro

 

在项目**根目录**下打开终端，使用 npm或者yarn安装包

 

# npm install axios
yarn add axios

 

 

接着在src目录下创建一个utils/http.js脚本中，导入axios并通过create方法实例化一个http客户端请求对象，这样我们才能在vue的所有中组件直接使用axios发起http请求。

src/utils/http.js，代码：

 

import axios from "axios";

// 实例化axios对象
const http = axios.create({
    baseURL: 'http://httpbin.org/',    // 请求的公共路径,一般填写服务端的默认的api地址，这个地址在具体使用的时候覆盖
    timeout: 8000,                           // 最大请求超时时间，请求超过这个时间则报错，有文件上传的站点不要设置这个参数
    headers: {'X-Custom-Header': 'foobar'}   // 默认的预定义请求头，一般工作中这里填写隐藏了客户端身份的字段
});

// http.get("get"); // http://httpbin.org/get  get请求这个地址
// http.get("http://httpbin.org'") // http://httpbin.org/get get请求这个地址

export default http;

 

 

 

 

 

 

 

使用axios获取数据

src/views/Login.vue，代码：

<script setup>
import http from "../utils/http";
const send_post =()=>{
  /**
 * 发起post请求
 */
  http.post("http://httpbin.org/post", {
    "username": "小明",
    "age": 17,
    sex: true,
  },{
    headers:{
      Authorization: "xxxxx",
    }
  }).then(response=>{
    console.log(response.data); // 服务端响应的响应体
  }).catch(error=>{
    console.log('请求错误！error=', error)
  })
}
</script>

<template>
  <button @click="send_post">点击发送post请求</button>
</template>

<style scoped>

</style>

 

 

 

 

 src/utils/http.js

import axios from "axios";

// 实例化axios对象
const http = axios.create({
    baseURL: 'http://httpbin.org',    // 请求的公共路径,一般填写服务端的默认的api地址，这个地址在具体使用的时候覆盖
    timeout: 8000,                           // 最大请求超时时间，请求超过这个时间则报错，有文件上传的站点不要设置这个参数
    headers: {'X-Custom-Header': 'foobar'}   // 默认的预定义请求头，一般工作中这里填写隐藏了客户端身份的字段
});

// http.get("user"); // http://wthrcdn.etouch.cn/user  get请求这个地址
// http.get("http://www.baidu.com") // http://www.baidu.com/user get请求这个地址

export default http;

 

 

 src/views/Login.vue，代码：

<script setup>
import List from "./views/List.vue"
import Register from "./views/Register.vue";
import Goods from "./views/Goods.vue";
import Group from "./views/Group.vue";
import GroupApi from "./GroupApi.vue";
import Login from "./views/Login.vue";
// import User from "./views/User.vue";
// 使用js提供的location对象，获取url地址的路径
// script声明的所有变量都会被自动填充到data中，可以直接在template模板标签中使用
let url = location.pathname;
</script>

<template>
<!--  <List v-if="url==='/list'"></List>-->
<!--  <Register v-if="url==='/reg'"></Register>-->
<!--  <Goods></Goods>-->
<!--<Group></Group>-->
<!--  <GroupApi></GroupApi>-->
<!--  <User></User>-->
  <Login></Login>
</template>

<style scoped>
</style>

 

 

使用axios的时候，因为本质上来说axios还是javascript提供的ajax，所以也会受到同源策略的影响。

所谓的同源策略，实际上是浏览器为了保护客户端用户在服务端中的数据的安全所设置的一种网络安全机制/安全策略，

同源策略，可以禁止不同源下的客户端的js在没有得到服务端授权的情况下操作或调用服务端的数据。

所谓的同源，实际上就是判断通信的客户端与服务端，双方是否处于同一个协议，同一个域名/IP或同一个端口下，如果三者相同，则服务端和客户端属于同源，则同源策略不会拦截客户端的js请求服务端数据，如果三者中任意1个信息不一致，则属于不同源，不同源的客户端js无法访问和操作没有明确授权的服务端数据。

解决同源策略的方式有3种：CORS服务端授权、服务端代理、jsonp

CORS，翻译：跨域资源共享

 

9.2 请求和响应拦截器

官方文档：https://axios-http.com/zh/docs/interceptors

代码：

 

import axios from "axios";

// 实例化axios对象
const http = axios.create({
    baseURL: 'http://httpbin.org',    // 请求的公共路径,一般填写服务端的默认的api地址，这个地址在具体使用的时候覆盖
    timeout: 8000,                           // 最大请求超时时间，请求超过这个时间则报错，有文件上传的站点不要设置这个参数
    headers: {'X-Custom-Header': 'foobar'}   // 默认的预定义请求头，一般工作中这里填写隐藏了客户端身份的字段
});



// 请求拦截器
http.interceptors.request.use(config=>{
     // 编写 一些公共的请求代码 在 http请求发送之前
    console.log("loading..., 请求头配置，config=", config)
    return config;
},()=>{
    // 编写一些公共的错误处理代码在请求发生错误时
    alert("报错！报错！");
    return Promise.reject(error);
})

// 响应拦截器
http.interceptors.response.use(response=>{
    // 编写 一些公共代码在服务端响应数据成功时，响应状态是2xx
    console.log("关闭loading...")
    return response;
}, error=>{
    // 编写一些公共代码在服务端响应错误时，响应状态码>=4xx
    console.log("服务端告诉我们，请求出错了。");
    return Promise.reject(error);
});

export default http;

 

翻译

搜索

复制