vue（六）网络请求Axios

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.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

以下是可用的实例方法。指定的配置将与实例的配置合并。

axios#request(config)

axios#get(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

默认配置

您可以指定默认配置，它将作用于每个请求。全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先级

配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。

响应结构

一个请求的响应包含以下信息。

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。配置axios的请求拦截和响应拦截

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

错误处理catch

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

请求体编码

默认情况下，axios将 JavaScript 对象序列化为 JSON 。

要以application/x-www-form-urlencoded格式发送数据，可以使用qs 库编码数据:

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

或者用另一种方式 (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

要以Form data格式发送数据，可以使用 form-data 库，如下所示:

const FormData = require('form-data');
 
const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));
​
axios.post('https://example.com', form, { headers: form.getHeaders() })

网络请求跨域

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

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

目前两种跨域解决方案：

• 后端解决：CROS。添加 header：access-control-allow-origin

• 前端解决：proxy。在vue.config.js文件中添加配置，添加配置后重启服务才会生效

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