axios跨域及封装

1、安装

npm install axios --save

2、main.js引用

import axios from 'axios';

3、axios基本用法

function get(){
    //axios.get('http://localhost:3000/post?id=1')
    axios({
        url:'/posts',
        param:{
            id:1
        }
    })
    .then(response => {
        console.log('/posts get',response.data)
    })
    .catch(error => {
        console.log('error',error.message)
    })
}

function post(){
   // axios.post('http://localhost:3000/post',{"title":"json-server3"})
    axios({
        url:'/post',
        methods;'post',
        data:{"title":"json-server3"}
          
    })
    .then(response => {
        console.log('/posts post',response.data)
    })
}

4、axios并发请求

使用axios.all()函数

axios.all([
    axios(
		url:'http://123.207.32.32:8000/home/multidata'),
    axios(
			url:'http://123.207.32.32:8000/home/data',
			params:{
   				type:'sell',
    			page:4,
    			}
    )]).then(results=>{
    console.log(results[0]);
    console.log(results[1]);
})

5、axios跨域问题

vuecli3中在项目的根路径也就是和package.json同级的文件夹下创建一个vue.config.js的文件（一定不要放错路径），在vue.config.js中写入：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: true,
  productionSourceMap: false,
  devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'http://47.**.***.31:8080',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': ''  //每次在对接函数中后台接口都需要包括/api才会被此跨域处理
          
  
         /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core 时
            实际上访问的地址是：http://47.**.***:8080/core,因为重写了 /api
           */
        }
      },
    }
  },
}

6、axios封装

为什么axios需要封装

通常我的项目会越做越大，页面也会也来越多。页面组件一多，有上百个接口，这个时候如果axios框架被社会淘汰了，但我们的项目需要继续运营下去，这时候我们就需要在各个页面里面去不断地修改import axios from “axios” 不断地去修改axios的函数，整个过程非常的繁琐不易于项目的维护。

这时候如果有统一的区管理接口，意思是，我们修改某一个接口时直接在区里修改请求的框架，其他页面只需要应用这个对接的函数就好了，那么是不是就免去的在各个页面修改代码的过程呢？所以，我们可以对专门用于对接的框架进行封装。再在各个页面中去调用用于对接的封装函数就好了。

①在App.vue同级创建一个network文件夹

②在network文件夹里创建一个request.js文件，用于封装对接函数

③在request.js中写入

import axios from "axios"
export function request(config){
  const instance = axios.create({
    baseURL:'/api',   
    	//我们在这里设置这个对接函数的baseURL为api，这样我们就不需要每次请求后台地址时都写/api了
    timeout:30000,
    headers:{
      "Content-Type":'application/json',
    }
  })
  return instance(config)
}

④在其他组件中调用

import {request} from "@/network/request";

     request({
          url:'/client/research/direction',//请求后台的地址 因为baseURL所以不需要/api
       //如果你在封装函数中没有设置baseURL则每一条url都需要带上/api
       //这样调用request函数，如果以后axios不维护了只需要在request.js去换一个框架，这里不需要修改
        }).then(res=>{
          var data = res.data.data;
          console.log(data);
        }).catch(err=>{
          console.log(err);
        })   

7、给axios的url传参

方法一

在data里设置一个变量。然后在组件中的request对接函数通过此去拼接

url:`/aaa/bbb/${this.id}`,

方法二

通过methods去传参拼接

/* <template>模板中*/
<list v-for="(item,index) in this.teacher" :key="index">
  <img src="../../assets/img/person.jpg" alt="" slot="img">
  <div class="text" slot="text">
    <h2 @click="teacherdet(item.mid)">{{item.name}}</h2>
    <p>{{item.introduction}}</p>
  </div>
</list>

//js
export default {
  components:{
    list,
  },
  data(){
    return {
      teacher:'',
    }
  },
  created(){
    this.change(1);//传参
  },
  methods:{
    change(content){  //通过content传入每个对象的唯一标识符mid（前端从后端获取）
      request({
          url:"/client/members/catalogue/1/"+content,
        }).then(res=>{
          var data = res.data;
              // console.log(data);
            this.teacher = data.data;
        }).catch(err=>{
          console.log(err);
        }) 
    },
    cpnclick(val){
      this.change(val); 
    }
  }
}

8、注意

确保阻止显示生产模式的消息，启用生产模式

开发模式：npm run dev是前端自己开发用的
生产模式：npm run build 打包之后给后端放在服务端上用的

在main.js中写入

Vue.config.productionTip = false

否则控制台会多出这个代码

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.