前端請(qǐng)求自然也發(fā)展迅速，從原生的XHR到j(luò)query ajax齐疙，再到現(xiàn)在的axios和fetch。axios（ http://www.axios-js.com/zh-cn/ ）是Vue推薦的http庫旭咽，這個(gè)還是要了解一點(diǎn)的贞奋。

安裝

$ npm install axios

基本使用的例子

1、在main.js中（肯定得創(chuàng)一個(gè)Vue腳手架的工程）import

import axios from 'axios'

2穷绵、使用axios
?錯(cuò)誤示范

import axios from 'axios'
const app = createApp(App)
app.use(axios).mount('#app')

這種寫法不支持, 因?yàn)?axios 是第三方庫, 不是vue的插件

?正確示范＝嗡！仲墨！
在原型上進(jìn)行綁定, 直接寫原型鏈

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


const app = createApp(App)
app.config.globalProperties.$axios = axios

app.use(router).mount('#app')

3勾缭、簡單發(fā)起一個(gè)請(qǐng)求
注意：這是高德地圖提供的一個(gè)天氣接口，高德接口已經(jīng)把跨域的問題解決好了目养，允許跨域

//高德接口已經(jīng)把跨域的問題解決好了俩由，允許跨域
this.$axios({
    url:`https://restapi.amap.com/v3/weather/weatherInfo?key=5737f6640c7a33f8fb22a952b298946b&city=340104`,
      }).then((res) => {
        console.log(res)
      }).catch((error)=>{
        console.log(error);
      });

封裝axios

1、直接用axios不好嗎混稽？為什么要封裝采驻？
說直白一點(diǎn)审胚，就是接口不同時(shí)改個(gè)域名就行了、可以統(tǒng)一管理請(qǐng)求礼旅、條例清晰膳叨、好維護(hù)
2、怎么封裝
要注意res是瀏覽器對(duì)請(qǐng)求響應(yīng)的處理結(jié)果痘系，res.status是http狀態(tài)碼菲嘴，這是超文本傳輸協(xié)議響應(yīng)狀態(tài)的3位數(shù)字代碼，在RFC 2616中規(guī)定好了汰翠，只有在data里面的status才能自己規(guī)定判斷

import axios from "axios"


//創(chuàng)建一個(gè)axios對(duì)象
const http = axios.create({
    timeout: 5000
})

//設(shè)置請(qǐng)求的攔截器
http.interceptors.request.use(config => {
    // 在這里龄坪，可以配置請(qǐng)求頭、token等信息
    return config
}, error => {
    console.log(error);
    return Promise.reject(error)
})


//設(shè)置響應(yīng)的攔截器
http.interceptors.response.use(res => {
    //返回的響應(yīng)數(shù)據(jù)
    /**
     * res是瀏覽器對(duì)請(qǐng)求響應(yīng)的處理結(jié)果复唤，res.status是http狀態(tài)碼健田，
     * 這是超文本傳輸協(xié)議響應(yīng)狀態(tài)的3位數(shù)字代碼，在RFC 2616中規(guī)定好了
     * 只有在data里面的status才能自己規(guī)定判斷
     */
    console.log(res)
    console.log(res.data)


    const data = res.data
    if (res.status == 200) {
        if (data.status == 1 || data.status == 1000) {
            return Promise.resolve(data)
        } else {
            console.log(data)
            return Promise.reject(data)
        }
    }
}, error => {
    if (error.response.status) {
        switch (error.response.status) {
            case 404:
                alert("請(qǐng)求路徑找不到佛纫！")
                break;
            case 500:
                alert("服務(wù)器內(nèi)部錯(cuò)誤妓局！")
                break;
            default:
                break;
        }
    }
    return Promise.reject(error)
})

export default http

3、封裝完怎么用呈宇？
同樣好爬，把封裝好的axios實(shí)例加到原型上

import request from '@/utils/request' 
const app = createApp(App)
app.config.globalProperties.$request = request
app.mount('#app')

之后請(qǐng)求

  //自己封裝的axios，這個(gè)接口同樣直接允許跨域
      this.$request({
        url:`http://wthrcdn.etouch.cn/weather_mini?city=%E5%BC%8B%E6%B1%9F`,
      }).then((res) => {
        console.log(res);
      }).catch((error)=>{
        console.log(error);
      })

有關(guān)跨域的問題

1甥啄、什么是同源策略存炮？
同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器蜈漓，它是瀏覽器最核心也最基本的安全功能穆桂，如果缺少了同源策略，瀏覽器很容易受到XSS迎变、CSFR等攻擊充尉。所謂同源是指 協(xié)議+域名+端口 三者相同飘言，即便兩個(gè)不同的域名指向同一個(gè)地址衣形，也非同源。

image.png

2姿鸿、什么是跨域谆吴？
當(dāng)一個(gè)請(qǐng)求url的 協(xié)議、域名苛预、端口 三者之間任意一個(gè) 與當(dāng)前頁面url不同 即為跨域

比如我現(xiàn)在有一個(gè)自己寫的接口

http://localhost/allPHPcode/starbuckBackend/menu.php

它返回menu的json數(shù)據(jù)

image.png

現(xiàn)在向它發(fā)起請(qǐng)求

//自己寫的一個(gè)接口句狼，不允許跨域
      this.$axios({
        url:`localhost/allPHPcode/starbuckBackend/menu.php`
      }).then((res) => {
        console.log(res);
      }).catch((error) => {
        console.log(error);
      })

報(bào)錯(cuò)

image.png

端口號(hào)不同，存在跨域
3热某、解決辦法一——允許跨域
查看請(qǐng)求自己寫的menu接口時(shí)的網(wǎng)絡(luò)面板

image.png

image.png

對(duì)比就可以發(fā)現(xiàn)腻菇，如果要允許跨域胳螟，在php頂部加上以下header即可

// 跨域問題處理
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
header('Access-Control-Allow-Headers:x-requested-with,content-type');

添加header后再次請(qǐng)求

image.png

4、解決辦法二——代理
通過中間件來解決跨域問題筹吐，瀏覽器有跨域限制糖耸，但是服務(wù)器沒有跨域限制，所以中間件其實(shí)就是服務(wù)器（服務(wù)器對(duì)數(shù)據(jù)進(jìn)行了轉(zhuǎn)發(fā)而已）

image.png

首先在vue.config.js文件里配置一下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      '/localhost':{                     //這個(gè)就是的標(biāo)識(shí)丘薛，當(dāng)接口用 localhost 開頭才用代理
        target:'http://localhost',       //這是代理到哪里
        pathRewrite:{ '^/localhost':''}, //這個(gè)是路徑重寫嘉竟，比如代理的標(biāo)識(shí)是 localhost，但是要請(qǐng)求的路徑里沒有 localhost 這個(gè)字符串洋侨，所以用pathRwrite把  localhost  換成空字符串舍扰，也就是刪掉，之后再拼到target上就合適了
        changeOrigin:true                //開啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端希坚，然后發(fā)送請(qǐng)求的數(shù)據(jù)边苹，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題
      }
    }
  }
})

再次發(fā)起請(qǐng)求裁僧，問題解決

image.png

以上例子的源碼：https://github.com/AnnGreen1/axios-demo