vue（六）网络请求

yjh1995 / 2023-07-06 / 原文

Axios

Axios是一个基于promise的网络请求库，安装npm install --save axios

局部引入：组件中引入import axios from "axios"
全局引入：main.js中引入，并挂载

// 在main.js中全局引入
import axios from "axios"
// 挂载到全局
const app= createApp(App)
app.config.globalProperties.$axios=axios
app.mount('#app')

Axios在组件中使用

<script>
// 引入querystring库，供post请求使用
import qr from "querystring";

export default {
  name: 'App',
  // 在渲染完成后进行网络请求
  mounted(){
  // get请求
        this.$axios.get("http://xxx/xx?id=1")
        .then(res =>{
            console.log(res.data)
        })
  // Post请求，body需要使用querystring转换成字符串，网络请求不传输对象
        this.$axios.post("http://xxx/xx",
            qr.stringify(
              {"phone":null,"name":null}
            )
        ).then(res =>{
            console.log(res.data)
        })
    }
}
</script>

Axios封装

配置axios的请求拦截和响应拦截

import axios from "axios"
import qr from "querystring"

// 创建实例
const instace = axios.create({timeout:500})

// 请求拦截器
instance.interceptors.request.user(
    config=>{
         ...,
         return config
    },
    error=>{
        ...,
        return xxx
    }
)
// 响应拦截器
instance.interceptors.response.user(
    response=>{
        ...
    },
    error=>{
        ...
    }
)

export default instance;

网络请求跨域

同源策略是浏览器的一项安全策略，浏览器只允许JS代码请求与当前协议、服务器域名、端口相同的数据接口上的数据。

JS采取的就是同源策略，所以会有跨域问题。

目前两种跨域解决方案：

后端解决：CROS。添加 header：access-control-allow-origin
前端解决：proxy。在vue.config.js文件中添加配置，添加配置后重启服务才会生效

module.exports = defineConfig({
  devServer:{
      proxy:{
          '/api':{
              target: '协议+ip+端口', // 会出现跨域的协议+ip+端口
              changeOrigin: true
          }
      }
  }
})