vue学习笔记04（axios网络请求）

小天呐

已于 2023-03-09 14:53:55 修改

阅读量1.9k

点赞数 2

文章标签： vue.js 学习 javascript

于 2022-11-30 22:11:55 首次发布

本文链接：https://blog.csdn.net/m0_65519288/article/details/128120669

版权

axios是一个基于Promise的网络请求库，作用于node.js和浏览器中。这和JQuery的ajax使用方式类似。

五、第三个请求参数params和data的区别

一、vue项目中安装axios

安装命令：npm install --save axios

安装完后在package.json文件中查看是否安装成功和安装的版本

二、在项目中引入axios

引入axios的方法有两种

1、在组件中单独引入

import axios from 'axios';

对于一个网页的网络请求是很多的，如果每个组件都需要单独引入的话，就变得麻烦很多，这时候只需要从全局引入就可以变得方便。

2、全局引入axios（在main.js中）

import Vue from 'vue'
import App from './App.vue'
// 引入axios
import Axios from 'axios'

Vue.config.productionTip = false
// 将axios挂载到Vue原型的原型上
Vue.prototype.$axios = Axios;

new Vue({
  render: h => h(App),
}).$mount('#app')

在子组件的mounted中打印一下this

在vue的原型的原型对象上可以看到挂载好的axios

三、如何使用axios发请求

1、局部使用axios发请求

（1）、get请求

axios({
    // 请求地址
    url: 'http://jsonplaceholder.typicode.com/posts',
    // 请求类型
    method: 'get'
}).then(res => {
    console.log(res);
})

控制台打印请求的结果

（2）、post请求

post请求需要传入data参数（接收的数据是字符串类型，不是对象类型，要进行转换）

axios({
    url: "http://iwenwiki.com/api/blueberrypai/login.php",
    method: "post",
    data: querystring.stringify ({
        user_id: "iwen@qq.com",
        password: "iwen123",
        verification_code: "crfvw"
    })
}).then(res => {
    console.log(res.data);
})

2、全局使用axios发请求

mounted() {
    // vue原型的原型上有$axios属性
    this.$axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
        console.log(res);
    })
}

三、解决跨域问题

js采取的同源策略，同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据。任何一个不相同，都会产生跨越问题。

解决跨域的问题有两种：

1.后台解决: cors

2.前台解决: proxy

如果后端没有处理跨域，就得前端自己处理，需要在vue.config.js文件中配置以下内容

devServer: {
    proxy: {
        '/api': {
            // 只要发现有'/api'部分，就跳到真实的地址
            target: 'url地址(域名部分)',
            changeOrigin: true
        }
    }
}

四、axios的二次封装

在src目录下建一个api文件夹里面放有axios的所有内容

index.js放的所有接口函数

request.js是对axios的二次封装

要使用封装好的接口函数的话需要对它进行引入

步骤一：request.js：对axios二次封装

// 引入axios
import axios from "axios";

// 创建网络请求对象,调用axios的creat方法
const requests = axios.create({
    // 基础路径，发请求的时候，路径当中会出现api
    baseURL: 'http://jsonplaceholder.typicode.com',
    //超时时间
    timeout: 5000
})

// 请求拦截，发送数据之前
// interceptors拦截器对象，request发送  调用use方法
requests.interceptors.request.use(config => {
    return config;
})

// 响应拦截,获取数据之前
// response: 响应对象
requests.interceptors.response.use(res => {
    return res.data;
}, error => {
    console.log(error);
})

export default requests;

步骤二：在index.js中写请求接口函数

先要对封装的axios进行引入，然后再导出接口函数

// 所有的api接口进行统一的管理
import requests from "./request";

export const reqGet = () => requests({ url: '/posts', method: 'get' })

步骤三：在组件中使用

<script>
// 引入接口函数
import { reqGet } from '@/api'
export default {
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      let res = await reqGet();
      console.log(res);
    }
  }
}
</script>

这是控制台拿到返回的数据