后端交互(ajax,fetch和axios)

跨域问题

-浏览器有个安全策略：不允许向不同域(地址+端口号)发送请求获取数据，浏览器的 同源策略
-解决跨域：
-后端的Cors(跨域资源共享)技术：就是在响应头中加入允许即可Https://Www.Cnblogs.Com/Sherwin1995/Articles/16832830.Html
-Nginx做代理

方式一：使用jq的ajax方法

$.ajax({
                    url: 'http://127.0.0.1:8000/test/',
                    type: 'get',
                    success: data => {
                        // 后端返回json格式字符串，$.ajax拿到字符串，转成了js的对象，给了data
                        this.name = data.name
                        this.age = data.age
                    }
                })

使用fetch

  fetch('http://127.0.0.1:8000/test/').then(res => res.json()).then(res => {
                console.log(res)
                this.name = res.name
                this.age = res.age
            })

axios(js模块)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  //get
  axios.get('http://127.0.0.1:8000/test/').then(res=>{
            console.log(res.data) // 真正后端给的数据(res.data 才是真正的数据)
            this.name=res.data.name
            this.age=res.data.age
          })
  //post
  axios.post('http://127.0.0.1:8000/api/',{
        name:'测试',
        url:'/api/5',
        method:'1'
      }).then(res=>{
        console.log(res);
      })
    }

在vue3中用axios

安装

npm install axios --save 手动配置
或者
vue add axios

方式1

plugins/axios.js

"use strict";

import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
axios.defaults.baseURL ='http://127.0.0.1:8000';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

export default _axios;

NewView.vue

<template>
  <input type="text" v-model="methods">
  <button @click="doSend">send</button>
</template>

<script setup>
  import {ref} from "vue";
  import _axios from "@/plugins/axios";
  const methods = ref('')
  function doSend(){
    _axios.post('/api_method/',{
      name:methods.value
    }).then((res)=>{
      console.log(res)
    }).catch((error)=>{
      console.log(error)
    })
  }
</script>

拦截器配置

"use strict";

import axios from "axios";
// import {useStore} from "vuex";
// import {useRouter} from "vue-router";

import store from "@/store";
import router from "@/router";
// Full config:  https://github.com/axios/axios#request-config
axios.defaults.baseURL ='http://127.0.0.1:8000';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);
_axios.interceptors.request.use(
  function(config) {
    // 发送请求之前操作，如加请求头
      const token = localStorage.getItem('token')
      if(token){
          config.headers.common['Authorization']=token
      }
    return config;
  },
  function(error) {
    // 发送请求错误的操作
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // 响应成功之后的操作（200）,假定code=1000，鉴权失效
      if(response.data.id ===1000){
          store.commit('logout')
          router.replace({name:'Login'})
          return Promise.reject()
      }
    return response;
  },
  function(error) {
    // 响应失败做的操作（500）
    return Promise.reject(error);
  }
);


export default _axios;

方式2

axios.js

"use strict";

import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
    // baseURL: process.env.baseURL || process.env.apiUrl || ""
    // timeout: 60 * 1000, // Timeout
    // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
    function (config) {
        // Do something before request is sent
        return config;
    },
    function (error) {
        // Do something with request error
        return Promise.reject(error);
    }
);

// Add a response interceptor
_axios.interceptors.response.use(
    function (response) {
        // Do something with response data
        return response;
    },
    function (error) {
        // Do something with response error
        return Promise.reject(error);
    }
);


export function installAxios(Vue) {
    Vue.config.globalProperties.$axios = _axios;
}

main.js

import {installAxios} from './plugins/axios'
const app = createApp(App)
installAxios(app)
app.use(store).use(router).use(ElementPlus).mount('#app')

使用

import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance()
proxy.$axios.get()