VUE腳手架axios官方網(wǎng)址：
https://www.kancloud.cn/yunye/axios/234845
需要在文檔安裝?npm install axios 才能使用 axios
1.并發(fā)請求：
<template>
? <div id="app">
? </div>
</template>
<script>
import axios from 'axios'
export default {
? name: 'App',
? data(){
? return{
? ? url1:'https://cno..................',
? ? url2:'https://cno.........................'
? }
? },
? /* 執(zhí)行多個并發(fā)請求 */
? created(){
? ? Promise.all([axios.get(this.url1), ?axios.get(this.url2)])
? ? .then(res=>{
? ? ? ? ?console.log(res);
? ? })
? ? /* 和上面Promise 方法類似 但是Promise只返回一個數(shù)組 */
? ?axios.all( ?[axios.get(this.url1), ?axios.get(this.url2)] )
? ?.then( axios.spread( (res1,res2)=>{
? ? ?/* 兩個請求都請求完畢了,再返回結果 */
? ? ? ?console.log(res1);
? ? ? ?console.log(res2);
? ?}))
? }
}
</script>
<style>
#app {
? font-family: Avenir, Helvetica, Arial, sans-serif;
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
? text-align: center;
? color: #2c3e50;
? margin-top: 60px;
}
</style>
2.跨域 實例 全局 攔截：
跨域：建立一個簡單的js文檔：
let http = require('http')
http.createServer((req,res)=>{
? ? /* 這句話是允許跨域用的 */
? ? // res.setHeader('Access-Control-Allow-Origin','*')
? ? /* 下面是后端返回的結果 */
? ? res.end('yousuccess')
? ? /* 3000是端口 */
}).listen(3000,function(){
? ? console.log('server start...')
})
在vue.config.js文件中配置一下：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
? transpileDependencies: true,
? devServer: {
? ? proxy: {
? ? ? '/api': {
? ? ? ? target: 'http://localhost:3000/'
? ? ? }
? ? }
? }
})
主文件App.vue：
<template>
? <div id="app">
? ?<button @click="login">登 錄</button>
? ?<button @click="getUser">獲取用戶</button>
? ?<button @click="getList">所有權限列表</button>
? ?<child-a></child-a>
? </div>
</template>
<script>
import axios from 'axios'
import ChildA from '@/components/ChildA.vue'
export default {
? name: 'App',
? components:{
? ?ChildA
? },
? data(){
? return{
? ? instance:null
? }
? },
? created(){
? ? /* axios.get('/api')
? ? .then(res=>{
? ? ?console.log(res);
? ? }) */
? ? //* 自定義配置新建一個 axios 實例 */
? ? //* 設置了baseURL 使用了這個instance實例都不用把url寫全,直接寫路徑(例如:login)即可 */
? ? /* this.instance = axios.create({
? ? ? baseURL:'http://time.......................',
? ? ? //如果請求花費了超過'timeout'時間,請求將被中斷
? ? ? timeout:3000,
? ? ? //給使用instance這個實例的都配置上Headers
? ? ? headers:{
? ? ? ? ? ?'Authorization':localStorage.token
? ? ? ? ?}
? ? }) */
? ? /* axios 全局配置基本路徑和請求頭 */
? ? axios.defaults.baseURL = 'http://tim................................',
? ? axios.defaults.headers.common['Authorization'] = localStorage.token,
? ? axios.defaults.timeout=3000;
? ? //如果想局部配置 請創(chuàng)建一個實例instance通過實例調接口
? ? //全局配置 添加請求攔截器
? ? //每次發(fā)送接口都會進行攔截
? ? axios.interceptors.request.use(function (config) {
? ? ? //console.log('config',config);
? ? ? //在請求攔截時候 添加請求頭也是可以的
? ? ? config.headers.Authorization = localStorage.token
? ? ? //必須把config return ?出去
? ? ? return config
? ? },function(error) {
? ? ? //對請求錯誤做些什么
? ? ? return Promise.reject(error)
? ? });
? ? //添加響應攔截器
? ? //只要請求有相應 都會先走一遍響應攔截器
? ? axios.interceptors.response.use(function (response) {
? ? ? //對響應數(shù)據(jù)做點什么
? ? ? console.log('response',response);
? ? ? //可以同意給返回數(shù)據(jù) 再添加屬性和值
? ? ? response.data.msg = 'VUE好好學'
? ? ? //response 也是必須要return出去的
? ? ? //可以在響應攔截里面直接把數(shù)據(jù)data返回出去
? ? ? return response.data
? ? },function(error) {
? ? ? ? ?//對請求錯誤做些什么
? ? ? return Promise.reject(error)
? ? })
? },
? mounted(){
? ?/* 獲取元素dom使用,mounted里面dom加載完畢 */
? },
? methods:{
? ? login(){
? ? ? /* this.instance */axios.post('login',{
? ? ? ? username:'admin',
? ? ? ? password:'123456'
? ? ? })
? ? ? .then(res=>{
? ? ? ? console.log(res.data);
? ? ? ? localStorage.token = res.data.token
? ? ? })
? ? },
? ? getUser(){
? ? ?axios.get('users',{
? ? ? ? params:{
? ? ? ? ? pagenum:1,
? ? ? ? ? pagesize:5
? ? ? ? },
? ? ? ? /* 在get配置請求中這樣配置 */
? ? ? ? /* ?headers:{
? ? ? ? ? ?'Authorization':localStorage.token
? ? ? ? ?} */
? ? ? })
? ? ? .then(res=>{
? ? ? ?console.log(res);
? ? ? })
? ? },
? ? getList(){
? ? ? axios.get('right/list')
? ? ? .then(res=>{
? ? ? ? console.log(res);
? ? ? })
? ? }
? }
}
</script>
<style>
#app {
? font-family: Avenir, Helvetica, Arial, sans-serif;
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
? text-align: center;
? color: #2c3e50;
? margin-top: 60px;
}
</style>
也可以在main.js文件中設置全局axios：
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
/* 在入口main.js文件導入axios
? ?并掛載到Vue構造函數(shù)的原型下 目的在供所有Vue組件使用
? ? 這樣寫就不用每個vue頁面都導入axios */
? ? Vue.prototype.$axios = axios;
new Vue({
? render: h => h(App),
}).$mount('#app')
