【axios的基本使用】

axios的基本使用

axios是一个专注于网络请求的库

基本使用

1.安装axios到生产环境
npm i axios --save

2.在局部导入axios对象
import axios from 'axios'

1.发起GET请求

	//调用axios方法得到的返回值是Promise对象
	/* get传参的第一种方式 */
	axios.get('/mock-json/mock1.json?name=zhangsan')
	/* get传参的第二种方式 通过一个对象 对象里面有params */
    axios.get('/mock-json/mock1.json',{
    
    // URL中的查询参数 get传参
      params:{
    
        name:"zhangsan"
      }
    })
	.then(res=>{
    
      // 获取真实数据
      console.log(res);
    })

2.发起post请求

let url = "http://timemeetyou.com:8889/api/private/v1/login"
axios.post(url,{
    
      username:"admin",
      password:"123456"
    })
    .then(res=>{
    
      console.log(res);
    })

/* 第三种 axios的全面写法 */
axios({
    
      method:"post",
      url:url,
      data:{
    
        username:"admin",
        password:"111111"
      }
    })
    .then(res=>{
    
      console.log(res);
    },()=>{
    
      console.log('出现错误提示弹出框');
    })

axios挂载到Vue原型上

在main.js中

import axios from 'axios'

// 全局配置的根路径
axios.defaults.baseURL='http://www.liulongbin.top:3006'
// 把axios挂载到Vue.prototype上，供给每个组件的实例直接使用
Vue.prototype.$axios = axios

在组件中使用axios

 methods: {
    
    async getinfo() {
    
      const {
     data: res } = await this.$axios.get('/api/get')
      console.log(res)
    }
  }

好处:在组件中发起请求直接this.$axios就可以发起请求

缺点:无法实现api接口的复用 在自己的组件不可以使用自己的api接口

解决方法

// axios创建一个axios实例化
var instance = axios.create({
    
  baseURL: 'http://timemeetyou.com:8889/api/private/v1/',
  timeout: 1000,
  headers:{
    'Authorization':'token123'}
});


Vue.prototype.$axios=instance

在main.js中创建axios实例对象然后挂载到vue原型上，可以实现自己组件请求api接口