axios 和vue

axios

• Promise

//回调地狱
    ajax.get('url',function (data){
        ajax.get('url?id=data.id',function (){
            ......
        })
    })

 //Promise
    new Promise((resolve,reject)=>{
        console.log('this is aaaaa');//
        // resolve 和reject 只执行一个，谁在前执行谁
        resolve('###############');// 传到then
        reject('@@@@@@@@@@@@@@@@@');// 如果有错误跳转到catch执行
    }).then(res=>{
        console.log('this is bbbb');
        console.log(res); //获取resolve传过来的参数
        console.log('11111111');//本线程 可以继续执行
        return new Promise((resolve,reject) =>{
            console.log('+++++++++++++')
            setTimeout(()=>{
                resolve('hello')
            },2000)
        } )
    }).then(res=>{
        console.log('this is ***********');// 2s后执行
        console.log(res);// 2s后执行
    }).catch(err=>{
        console.log('this is cccc');
        console.log(err);// 打印reject传值
    });

// Promise.all 多个请求一起返回参数
    Promise.all([
        new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('这是第一个请求');
            }, 1000)
        }),
        new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('这是第二个请求');
            }, 1000)
        })
    ]).then(res=>{
        console.log(res);//['这是第一个请求', '这是第二个请求']
    });

• axios入门

//引入axios
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
 axios({
        url:'https://api.shop.eduwork.cn/api/index',
        method:'get',
        params:{
            name:'username',
        }
    }).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })

• webpack 方式

//1、安装webpack及webpack-cli
npm install webpack webpack-cli webpack-dev-server -D  
//2、安装html 插件
npm i html-webpack-plugin -D
//引入插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
//使用插件：
new HtmlWebpackPlugin({
            // 复制 './src/index.html'文件， 并自动引入打包输出的所有资源（JS/CSS）
            template: "./src/index.html",
          // 默认是index.html名称，通过filename设置输出文件名称
           // filename: "demo.html"      
        })

//3、 创建目录src 并创建文件index.html 和index.js
//根目录创建webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    entry: './src/index.js',
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode:'development'
}
//打包
webpack
//开启服务器配置
webpack serve

// 4、在index.js做开发
import axios from "axios";//引入axios

axios({
    url:'https://api.shop.eduwork.cn/api/index',
    method:'get',
    params: {
        page:2,
        sales:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
});
//post方式
axios({
    method:'post',
    url:'http://localhost/axios/api.php',
    headers: {
        'content-type': 'application/x-www-form-urlencoded'
    },
    data:{
        name:'username',
        age:'30',
        sex:'aaa'
    }
}).then(res=>{
    console.log(res);
});

//get请求
axios.get('https://api.shop.eduwork.cn/api/index',{params:{
    page:2,
    sales:1
}});
//更多请求方式
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

//axios.all() 和 promise.all() 方法是一个道理
axios.all([
    axios.get('https://api.shop.eduwork.cn/api/index',{params:{
            page:2,
//         sales:1
        }}),
    axios.get('https://api.shop.eduwork.cn/api/goods',{params:{
            page:2,
//         sales:1
        }})
]).then(res=>{
    console.log(res);//['这是第一个请求', '这是第二个请求']
});

• axios的全局配置方案

axios.defaults.baseURL="https://api.shop.eduwork.cn";
axios.defaults.timeout=5000;
axios.defaults.headers.post['content-type']='application/x-www-form-urlencoded';
axios.get('/api/index',{params:{
    page:2,
//         sales:1
}}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
});
//create创建一个新的实例对象
const inurl=axios.create({
    url:'https://api2.shop.eduwork.cn',
    timeout:3000,
    // method;'post'
});
//即可调用方法，和axios实例同
inurl.get('/api/goods',{params:{
        page:2,
//         sales:1
    }}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
});

• axios拦截器

//为每个请求都带上的参数，比如token，时间戳等。
///对返回的状态进行判断，比如token是否过期
// 创建全局拦截器
// request请求
axios.interceptors.request.use(
    config=>{
        console.log('######');
        //每次请求都会调用这个方法
    },
    err=>{
        return Promise.error(error);
    }
)
//response 返回
axios.interceptors.response.use(
    config=>{
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    err=>{
        if (error.response.status) {
            return Promise.reject(error.response);
        }
    }
)

vue

• 认识vue

Vue 的两核心：

响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心 dom 操 作，而专心数据操作

可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合 整个应用形成倒置组件树，可维护，可重用，可测试

• 开发初体验

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue体验</title>
<!--    1、通过静态CDN引入Vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>
</head>
<body>
 <div id="app">
     {{msg}}
     <hr />
     {{list}}
     <hr />
     {{one()}}
 </div>
 <script>
     //创建一个Vue
     const app= Vue.createApp({
         data(){
             return{
                 msg:'this is test',
                 list:['aaa','bbb']
             }
         },
         methods: {
             one(){
                 console.log('************')
                 console.log(this.msg) //调用msg
                 this.two() //调用two方法
                 return '1111111111'
             },
             two(){
                 console.log('@@@@@@@@@@@@@@@@@@');
             }
         }
     }).mount('#app');
     app.msg='hello';// 显示就会变成 hello 数据发生改变 显示立即改变
     app.one();//也可以在这里调用
 </script>
</body>
</html>

• vue 脚手架

//默认已经帮我们搭建好了一套利用 Webpack 管理 vue 的项目结构 
//命令安装：npm install -g @vue/cli 
//检查版本：vue --version 
//创建项目：vue create 项目名称 
//配置文件详细 vue.config.js

//1、创建项目
vue create demo //创建demo项目
//2、选择vue2或者vue3 选择 Manually select features
//3、空格选中 选择如下三个
Choose Vue version
Babel
CSS Pre-processors
//4、Sass/SCSS (with dart-sass)
//5、In package.json

npm run bulid //项目上线
npm run serve //开启监听端口

{ createApp } 相当于 vue.createApp

//vue.config.js
const webpack = require('webpack'); module.exports = { outputDir:'build', configureWebpack:{ plugins:[ new webpack.BannerPlugin({ banner:'学习猿地-wwww.lmonkey.com-成就自己的只需一套精品' }) ] } }