axios安装及使用

  1. 使用npm安装
    $ npm install axios
    $ npm install --save axios vue-axios
  1. 入口文件引入
    import axios from ‘axios’
    Vue.prototype.$ axios=axios //全局注册,使用方法为:this.$axios
    axios.defaults.withCredentials = true; //解决跨域请求
  1. 开始使用请求
<script>
    export default{
        data(){
            return{
                userId:666,
          token:'',
            }
        },
        created(){
            this.$axios({
                method:'post',
                url:'api',
                data:this.qs.stringify({    //这里是发送给后台的数据
                      userId:this.userId,
                      token:this.token,
                })
            }).then((response) =>{          //这里使用了ES6的语法
                console.log(response)       //请求成功返回的数据
            }).catch((error) =>{
                console.log(error)       //请求失败返回的数据
            })
        }
    }
</script>
### Axios 安装教程及环境配置 #### 一、Axios安装 可以通过 `npm` 或者 `yarn` 工具来完成 Axios安装。以下是具体的安装方式: 通过 npm 进行安装: ```bash npm install axios ``` 如果需要保存到项目的依赖中,则可以使用以下命令[^2]: ```bash npm install --save axios ``` 对于 Vue 项目,还可以额外引入 `vue-axios` 插件以便更好地与 Vue 集成[^3]。 --- #### 二、Axios 环境配置 为了更高效地管理和调用 HTTP 请求,在实际开发中通常会封装一个基于 Axios 的请求工具类。以下是详细的配置流程: ##### 1. 创建服务目录和服务文件 在项目的 `src` 根目录下创建一个新的文件夹(例如命名为 `service`),并在此文件夹内新建一个名为 `axios.js` 的文件: ```javascript // src/service/axios.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API || '', // 设置默认的基础 URL 地址 timeout: 5000, // 超时时间设置为 5 秒钟 }); // 添加请求拦截器 service.interceptors.request.use( config => { console.log('Request Config:', config); return config; }, error => Promise.reject(error) ); // 添加响应拦截器 service.interceptors.response.use( response => response.data, error => Promise.reject(error) ); export default service; // 导出配置好的实例供其他模块使用 ``` 上述代码实现了对 Axios 实例的自定义配置,包括基础路径设定、超时控制以及请求和响应的拦截处理逻辑[^1]。 ##### 2. 将 Axios 整合至全局上下文中 (可选步骤) 为了让整个应用程序都可以方便访问该工具类而无需重复导入,可以在入口文件 (`main.js`) 中注册它作为插件或者挂载到 Vue 原型链上: ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import request from '@/service/axios'; // 引入刚才创建的服务层组件 const app = createApp(App); app.config.globalProperties.$http = request; // 注册 $http 属性使得所有子组件都能直接调用 this.$http 发送网络请求 app.mount('#app'); ``` 这样做的好处在于任何地方只需要简单书写如下语句即可发起 GET 方法请求数据: ```javascript this.$http.get('/api/example').then(response => {}).catch(err => {}); ``` --- #### 三、注意事项 当遇到某些特定场景比如跨域调试失败等问题时,可能还需要调整后端接口服务器的相关 CORS 政策;另外也可以考虑借助 mock 数据模拟真实 API 行为来进行前端独立测试工作流构建[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值