Axios封装

vue-axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

一、流程：

　　1. 拿到项目和后端接口，首先要配置全局代理；
　　2. 接着全局封装axios和request.js；
　　3. 过滤axios请求方式，控制路径，参数的格式，http.js；
　　4. 正式封装api.js；
　　5. 页面调用；

二、具体

（1）前期配置

• 终端：【npm i axios -s】
• main.js:【import axios from "axios"】

（2）

（3）

（4）

import axios from 'axios'
import qs from 'qs' //qs模块可以将对象转换为查询字符串
const instance = axios.create()

const myaxios = {
    // 用于发送get请求
    /**
     * 基于Axios发送get请求，返回Pormise对象
     * @param {String} url 请求资源路径
     * @param {Object} params 请求参数
     */
    get(url, params) {
        return instance({
            url,
            params,
            method: 'GET'
        })
    },
    // 用于发送post请求
    /**
     * 基于Axios发送post请求
     * @param {String} url 请求资源路径
     * @param {Object} params 请求参数 {page:1,pagesize:20}==>page=1&pagesize=20
     */
    post(url, params) {
        return instance(
            {
                url,
                data: qs.stringify(params),
                method: 'POST'
            }
        )
    }
}

export default myaxios

文件名.vue

import axios from 'axios'
import myaxios from '../http/MyAxios'

export default {
    data() {
        return {
            movies: [],//用于保存需要显示的电影列表
            keyword: '',//与关键字输入框完成双向数据绑定
        }
    },
    methods: {
               getMovies() {
            let instance = axios.create()//创建axios实例
            instance({
                url: 'https://web.codeboy.com/bmdapi/movie-infos',
                params: { page: 1, pagesize: 20 },
                methos: "GET"
            })
                .then(res => {
                    console.log(res);
                    //将服务端返回的电影列表，保存进data.movies中
                    this.movies = res.data.data.result
                })
                .catch(res => {
                    console.warn(err);
                })
        },
        //使用Myaxios发送post，请求模糊查询电影列表
        getMoviesLike() {
            //没有关键字直接返回
            if (!this.keyword) {
                return
            }
            let instance = axios.create()
            instance({
                url: 'https://web.codeboy.com/bmdapi/movie-infos/name',
                method: 'POST',
                data: 'page=1&pagesize=20&name=' + this.keyword
            })
                .then(res => {
                    console.log("模糊查询的结果", res);
                    this.movies = res.data.data.result
                })
        }
    }
}

 三、原生方式

    methods:{
        getMthods(){
            axios.get("https://api.cat-shop.penkuoer.com/api/v1/products",{
                params:{
                    page:3,
                    per:2
                },
                headers:{
 
                }
            })
            .then(res => {
                console.log('res',res);
            })
        },
        postMthods(){
            axios.post("https://api.cat-shop.penkuoer.com/api/v1/auth/login",{
                name:"lxy",
                age:18
            },{
                params:{
                    a:123,
                    b:123
                }
            })
            .then(res => {
                console.log('res',res);
            })
        },
 
    }