Vue3中使用axios

目录

  • 什么是axios
  • axios安装与基本使用
    • 安装axios
    • 局部引入axios
    • 全局引入axios
    • axios常用的API
    • axios 常用的请求配置项
    • get的调用示例
    • post的调用示例
    • axios的拦截器
  • Vue3中对axios的封装
  • 跨域问题

什么是axios

axios是一个基于Promise的HTTP请求库,它可以在浏览器和Node.js中使用。axios的功能非常请打,支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。

axios安装与基本使用

安装axios

使用npm 或 yarn 安装axios到项目中

// 使用npm 安装
npm install axios
//或者 使用yarn 安装
yarn add axios

局部引入axios

axios的使用非常简单,如果只想在单个组件中使用axios,只需要在这个文件中引入axios,然后就可以直接使用了

import axios from 'axios'
onMounted(() => {
    getData()
})
const getData = async ()=>{
  const response = await axios.get('/hangzhou.json')
  console.log(response.data.features);  
}

全局引入axios

如果想要全局引入axios,我们可以借助 vue 提供的 provide 和 inject 方法来实现

在main.js中使用 provide 方法 注入axios,代码如下

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.provide('$axios',axios)
app.mount('#app')

在需要使用axios的页面使用 inject 方法调用即可

const axios = inject('$axios')
const response = await axios.get('/hangzhou.json')
console.log(response.data.features);

运行程序,在浏览器控制台可以看到两种方法都可以拿到数据
Vue3中使用axios_第1张图片

axios常用的API

  1. get(url[, config])

发送get请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

  1. delete(url[, config])

发送delete请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

  1. head(url[, config])

发送head请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

  1. options(url[, config])

发送options请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

  1. post(url[, data[, config]])

发送post请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

  1. put(url[, data[, config]])

发送put请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

  1. patch(url[, data[, config]])

发送patch请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。

  1. request(config)

发送自定义请求。config是请求的配置对象,包含请求的各种选项,如请求url、方法、数据、请求头等。返回一个Promise对象,响应结果包含在其中。

axios 常用的请求配置项

  • url (类型: string, 必填): HTTP 请求的服务器地址
  • method (类型: string, 默认: get): HTTP 请求方法
  • data (类型: Object, Array): 要发送的数据
  • params (类型: Object): 作为查询字符串添加到请求 URL 中的参数, 用于 GET, HEADDELETE 请求。
  • headers (类型: Object): HTTP 请求的头部信息
  • timeout (类型: number): 请求超时时间,单位为毫秒,默认为 0,即没有超时时间。
  • responseType (类型: string): 响应数据的格式, 默认是 `json
  • transformRequest (类型: Function): 对请求数据进行任意转换函数,函数接受传递的参数为请求核心对象
  • transformResponse (类型: Function): 对响应数据进行任意转换函数,函数接受传递的参数为响应核心对象
  • validateStatus (类型: Function): 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise ;如果 validateStatus 返回 true (或者设置为 null 或undefined), 则promise 将会 resolved,否则是 rejected。

get的调用示例

简单调用

axios.get('/api/data')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

完整调用

axios({
  method: 'get',
  url: '/api/data',
  params: {
    id: 123
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

post的调用示例

简单调用

axios.post('/api/data', { name: 'John', age: 30 })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

完整调用

axios({
  method: 'post',
  url: '/api/data',
  data: {
    name: 'John',
    age: 30
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

axios的拦截器

拦截器是axios提供的一种强大的机制,用于在请求或响应被处理之前对其进行拦截和转换。在axios的全局配置中,可以配置请求拦截器和响应拦截器。请求拦截器可以用于在发送请求之前对请求进行修改、添加请求头等操作,而响应拦截器可以用于在收到响应后对响应进行修改、数据转换、错误处理等操作。

请求拦截器的使用方法:

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么,比如添加请求头等操作
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }); 

如果我们有需要移除拦截器的情况,可以将请求拦截器存入一个变量中,在不需要使用的时候,调用request.eject方法,代码如下:

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

响应拦截器的使用方法:

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });  

和请求拦截器一样,如果我们有需要移除拦截器的情况,可以将响应拦截器存入一个变量中,在不需要使用的时候,调用request.eject方法,代码如下:

  // 在需要移除响应拦截器时
const myInterceptor = axios.interceptors.response.use(function () {/*...*/});
axios.interceptors.response.eject(myInterceptor);

Vue3中对axios的封装

在我们实际开发项目时,一个项目往往会涉及到很多接口,如果我们按照上面的方法去调用网络请求的话,每次都要去写一遍上面的方法,这将是一件非常恐怖的事情,后期如果需求有变更,比如url地址变了,那我们的工作量就是成倍的增加了。所以,在实际的开发中,我们都会将axios进行封装;我在实际的开发中会将网络相关的业务独立放到一个文件夹中,创建两个文件,一个是request.js文件用于封装 axios 请求;一个是api.js文件用于封装所有的 API 请求。详细步骤如下

  1. 在src文件夹下新建http文件夹,在http文件夹新建request.js文件和api.js文件
  2. 在request.js中引入axios,并封装 axios 请求,代码如下:
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 添加请求头等前置处理
    config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
    return config
  },
  error => {
    // 请求错误处理
    console.log('Request Error:', error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 响应后处理
    if (response.status === 200 && response.data.code === 200) {
      return Promise.resolve(response.data.data)
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    console.log('Response Error:', error)
    return Promise.reject(error)
  }
)

export default service

上面的axios封装中,我在请求拦截器中添加了一个前置处理,将请求头中添加了一个 Authorization 参数,用于后端 token 权限控制。在响应拦截器中添加了一个后置处理,对返回结果进行解析和处理,如果返回结果成功(code 为 200)则返回处理后的数据,否则返回处理后的错误信息。

  1. 在api.js中引入上面封装好的request.js文件,并封装所有的 API 请求,代码如下:
import request from './request'

// 用户登录
export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}
// 获取用户信息
export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  })
}
  1. 在组件中使用:在组件中,我们只需要引入api.js文件,并将需要使用的函数解构出来使用就可以了,代码如下:
import { login,getUserInfo } from './http/api'
const username = ref('')
const password = ref('')
const res = await login({ username: username.value, password: password.value })
console.log(res);

跨域问题

所谓跨域,指的是在客户端(浏览器)发起请求时,请求的目标资源位于另一个域名/端口/协议上,就是跨域。在跨域场景下,浏览器为了保护用户隐私和安全,通常会限制页面在未经允许的情况下访问跨域的资源。常见的跨域场景包括:

  1. 不同域名之间的跨域访问(如 www.example.com 访问 api.example.com)
  2. 同一服务器使用不同端口号(如 80 和 8080)的跨域访问
  3. HTTP 和 HTTPS 之间的跨域访问
  4. 不同域名之间使用不同的协议(如 http 和 https)的跨域访问

跨域访问的实现需要符合同源策略(Same-Origin Policy),即只允许源(协议、域名、端口)相同的网页脚本进行交互操作,否则浏览器会阻止跨域操作,保护用户安全。在跨域的情况下,通常可以通过一些手段来解决,如 CORS(跨域资源共享)等。

在Vue3中遇到跨域问题时,可以通过在vite.config.js中进行配置来解决。需要在vite.config.js中添加proxy选项,如下所示:

// vite.config.js
export default {
  server: {
    proxy: {
      // 在此处为需要解决跨域的 API 配置代理
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 去掉 /api 前缀
      }
    }
  }
}

上面的配置中,我将需要解决跨域的 API 的前缀设置为了 /api,然后通过 proxy 声明了一个代理规则,将包含 /api 前缀的请求转发到本地的 3000 端口,实现解决跨域的效果。其中,changeOrigin 设置为 true 表示修改请求头中的 Origin 字段为代理服务的地址,避免浏览器发送请求时出现跨域问题,rewrite 方法用于去掉请求中的 /api 前缀

然后在我上面封装的api.js中,在每个url前加上/api前缀,就可以了

// 获取用户信息
export function getUserInfo() {
  return request({
    url: '/api/user/info',
    method: 'get'
  })
}

好了,关于vue3中使用axios的内容就到这里吧,喜欢的小伙伴点赞关注加收藏哦!

你可能感兴趣的:(Vue,vue.js,javascript,html5,前端)