vue3 HTTP请求中的axios示例详解
西京刀客 人气:0vue3-HTTP请求
背景
vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。
axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护。
axios
官网: https://axios-http.com/
github:https://github.com/axios/axios
Axios 是一个简单的基于 promise 的 HTTP 客户端,适用于浏览器和 node.js。Axios 在具有非常可扩展的接口的小包中提供了一个简单易用的库。
安装axios并引入
安装:
npm的方式:
npm install axios --save
引入,【在哪里使用,就在哪里引入】
import axios from 'axios';
使用demo:
main.js
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
App.vue
<template> <div> <div v-if="!repositoryUrl">loading...</div> <div v-else>most star repository is <a :href="repositoryUrl" rel="external nofollow" >{{repositoryName}}</a></div> </div> <!--App --> </template> <script> import axios from 'axios'; export default { data() { return { repositoryUrl : '', repositoryName : '' } }, mounted() { // 发ajax请求,用以获取数据,此处地址意思是查询 github中 vue 星数最高的项目 const url = 'https://api.github.com/search/repositories?q=vue&sort=stars'; axios.get(url).then( response => { const result = response.data.items[0]; console.log(result) this.repositoryUrl = result.html_url; this.repositoryName = result.name; } ).catch( response => { alert('请求失败'); }, ); } } </script> <style> </style>
axios POST提交数据
Content-Type: application/json
const url = '/api/v1/web3/url/list_by_category'; let data = {"category":"tools"}; axios.post(url,data).then( response => { const result = response.data.data; console.log(result) this.repositoryName = result.name; this.web3_urls = result }).catch(response => { alert('请求失败'); }, );
工作中遇到常见问题
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource
cors阻止了你请求的资源(跨域问题)
解决方案:
在vue3.0中解决跨域首先要配置vue.config.js(在根目录下创建vue.config.js、跟package.json同级的地方)
vue.config.js
在vue.config.js中加入以下代码
module.exports = { devServer: { proxy: { '/api': { target: 'https://www.xxx.com/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } } } } };
我用的vite,参考
vue3(vite)设置代理,封装axios,api解耦
参考URL: https:
官方:https://vitejs.dev/config/server-options.html
我们修改的是vite.config.js,内容如下,核心就是加入了 server–> proxy字段:
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, server: { proxy: { '/api': { target: 'http://127.0.0.1:8000/', //接口域名 changeOrigin: true, //是否跨域 ws: false, //是否代理 websockets secure: false, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } } } } })
参考文献
vue3(vite)设置代理,封装axios,api解耦
参考URL: https:
加载全部内容